ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

[JQuery]簡単に設置できるトランジジョン付のスライドショー

March 31 2012

写真が数枚あって、それを表示させる際にスライドショーっぽく見せたい。
そんな時にもお世話になるJQuery。
ただ単にフェードイン・アウトするだけのもあるけど、もう少し動きのあるのがいい場合
今回紹介するjqFancyTransitionsなんかは設置も簡単でお手軽。

http://workshop.rs/projects/jqfancytransitions/
jqFancyTransitions
http://workshop.rs/projects/jqfancytransitions/

このスクリプトはデフォルトでいくつかのトランジジョンパターンがあって、パラメータ設定で選ぶだけのお手軽さがとっても良い感じなのです。

サンプルは左サムネイルから飛べる配布先ページにて全部見ることが可能です。
なかなかオッサレな感じのエフェクトが8種類揃っています。
IE6対応なのも嬉しいポイントですね。

さて、実際の設置方法ですがまず必要なのはJQueryの本体。
これをいつもの様に読み込ませてからjqFancyTransitions.1.8.min.jsを読み込ませます。

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jqFancyTransitions.1.8.min.js" type="text/javascript"></script>

スライドショーの部分のHTMLはこんな感じで組みます。

<div id='slideshowHolder'>
 <img src='img001.jpg' alt='img001でっす' />
 <img src='img002.jpg' alt='img002でっす' />
 <img src='img003.jpg' alt='img003でっす' />
</div>

そしてスライドショーの部分を動かす為にhead内にこのスクリプトを書いてあげましょう。

<script>
$(document).ready( function(){
	$('#slideshowHolder').jqFancyTransitions({ width: 400, height: 300 });
});
</script>

slideshowHolderの部分はdivタグのidと同じになってます。
HTML側で付けたものと同じにしないと動いてくれません。

あとはパラメータ部分でいろんな物を足すことができます。
下記はパラメータ一覧です。

effect: '', // wave, zipper, curtain
width: 500, // width of panel
height: 332, // height of panel
strips: 20, // number of strips
delay: 5000, // delay between images in ms
stripDelay: 50, // delay beetwen strips in ms
titleOpacity: 0.7, // opacity of title
titleSpeed: 1000, // speed of title appereance in ms
position: 'alternate', // top, bottom, alternate, curtain
direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate
navigation: false, // prev and next navigation buttons
links: false // show images as links

たとえば、600×400ピクセルのギャラリーで
エフェクトタイプをカーテンにしてスライドショーが始まる前に待機時間を作る場合は

<script>
$(document).ready( function(){
	$('#slideshowHolder').jqFancyTransitions({ effect: 'curtain',width: 600, height: 400,delay: 3000 });
});
</script>

という感じで設定してあげればOK。

それにしても簡単にこういうのができるのはありがたいですねえ。
さすがに非力なマシンでこいつが施されたページを見るのはきっついかも知れません。

| Posted in Javascript | Comments (0)

Post a Comment

※メールアドレス、URLは任意入力です。メールアドレスは入力しても公開されません。

« Jun 2017 July 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31