これは使える!かっこいいトランジション効果で写真を切り替えるjQueryスライドショー

jqueryのスライドショー

様々なトランジション効果で写真を切り替えるjQueryベースのスライドショースクリプト。
切り替えのスピードからトランジション効果の設定までオプションも充実。
自動で切り替わるので、サイトのタイトルとかちょっとしたアクセントとしてスライドを入れたいときにお勧め。
取り付け方も簡単なので、ぜひ使ってみてください。

超簡単に説明。
スライドショーにさせたい画像を次のように好きなだけ配置。

<div id="container">
	<img src="image1.jpg" alt="image 1" width="500" height="250" />
	<img src="image2.jpg" alt="image 2" width="500" height="250" />
	<img src="image3.jpg" alt="image 3" width="500" height="250" />
	.
	.
	.
</div>

あと、スクリプトをページのどこかで読み込んでください。
</body>の前にでも置けばいいでしょう。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.panelgallery-2.0.0.js"></script>
<script type="text/javascript">
$(function(){
	$('#container').panelGallery();
});
</script>

それだけでとりあえずランダムなトランジションがかかったスライドショーが出来ます。
僕はPhotoshop,Illustratorチュートリアルのブログで使ってみました。

詳しい説明は控えますが、オリジナルサイト(英語)で詳しい使い方が解説されています。
※tweet数とかはてぶの数が増えそうなら詳しい説明入れようと思います。

jQuery Panel Gallery Plugin 2.0
デモはこちら、いろいろなパターンのスライドを試せます

ちなみに日本語で紹介されているページ
50以上のエフェクトから選べるベーシックなスライドギャラリーjQueryプラグイン

TrackBack URL :
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>