素敵なスライドショー見つけました
画像が下から出たり入ったりするjQueryだよ。
こうゆうの探してたのー♪
オフィシャルのスライドショーに使わせていただきました。
ごっつぁんです!!!
http://css-tricks.com/startstop-slider/
こうゆうの探してたのー♪
オフィシャルのスライドショーに使わせていただきました。
ごっつぁんです!!!
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
まずラッシュの埋め込みに『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>
『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』がキャプションにあたる部分です。
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
上記ソースの『 my caption』がキャプションにあたる部分です。