ホームページ制作に役立つ無料素材やWEBデザイン等のメモ帳|FROGs note

ホームページ制作に役立つ無料素材やWEBデザインに関する自分のためのメモ帳です。

  • ホームページ制作に役立つ無料素材やWEBデザイン等のメモ帳|Frogs note
  • ホームページ制作に役立つ無料素材やWEBデザイン等のメモ帳|素材
  • ホームページ制作に役立つ無料素材やWEBデザイン等のメモ帳|本の紹介

 | HOME |  次のページ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

素敵なスライドショー見つけました

画像が下から出たり入ったりするjQueryだよ。
こうゆうの探してたのー♪

オフィシャルのスライドショーに使わせていただきました。
ごっつぁんです!!!

http://css-tricks.com/startstop-slider/

スポンサーサイト

ドロップダウンメニューをFLASHの上に表示させる方法

プルダウンメニューが表示されているFlashの下に隠れてしまう現象を解決

まずラッシュの埋め込みに『swfobject.js』を使用。(下記URL参考)
そのソースのフラッシュのスクリプトソース部分を下記のように変更する

▼以下フラッシュの部分のソース

所定の位置に

so.addParam("wmode", "transparent");

と追記する


【例】

<!--↓↓flash↓↓-->

<div id="flashcontent"><img src="img/flash.jpg" alt="" width="1000" height="500"></div>
<script type="text/javascript">
var soj = new SWFObject("img/top.swf", "flashcontent", "1000", "500", "8.0.0");
soj.addParam("wmode", "#000000");
soj.addParam("wmode", "transparent");
soj.write("flashcontent");
</script>

<!--↑↑flash↑↑-->

▼ヘッド内に以下のソースを忘れずに。
<script type="text/JavaScript" src="js/swfobject.js"></script>



プルダウンjQueryの参考URL:http://www.css-lecture.com/log/javascript/005.html

swfの埋め込み画像置換の参考URL:http://www.css-lecture.com/log/javascript/002.html

スライドショーの縦(サムネイル)

画像とテキストのサムネイル付


画像とテキストのサムネイル(矢印付)


テキストのメニューがあるタイプ


サムネイル画像+キャプション付
乗ってたサイト



LightBoxで『NEXT』『PREV』ボタンを使用したい

通常は a タグの中に「rel="lightbox"」と追加して使用します。

『NEXT』、『PREV』ボタンを使用したい場合は、『rel="lightbox[roadtrip]"』と記述すると、
『[roadtrip]』がついた画像達がグループ化して『NEXT』、『PREV』ボタンが表示するようになる。


<a href="large/image1.jpg" rel="lightbox[roadtrip]">画像 No.1</a>
<a href="large/image2.jpg" rel="lightbox[roadtrip]">画像 No.2</a>
<a href="large/image3.jpg" rel="lightbox[roadtrip]">画像 No.3</a>

LightBoxにキャプションを表示したい

キャプションを表示したい画像のソースに『 title="my caption"』を入力します。


<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>


上記ソースの『 my caption』がキャプションにあたる部分です。

 | HOME |  次のページ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。