その他
2008年4月21日
jQueryCycleプラグインでスライドショー作成
はじめまして。4月から入社しました小川です。
実は1年以上前から アルバイトとしてアシアルで働いていたのですが、この春専門学校を卒業して、晴れて正社員になりました。
流石に1年以上いるだけあって環境にはだいぶ慣れてはいますが、初めての社会人ということもあり中々緊張のとけない毎日です。早く一人前の社会人になれるよう頑張ります。
さて、今回が初めてのブログ投稿となりますが、今回はjQueryのプラグインの、jQuery Cycle Pluginというものを使って簡単にスライドショーを作ってみたいと思います。
まずはこちらをご覧ください。
どうでしょう。Javascriptを有効にされていれば、簡単なスライドショーが表示されたと思います。実はこれを実行するために最低限必要なコードですが・・・
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function() {
jQuery('#slide1').cycle();
});
//]]>
</script>
<div id="slide1">
<a href="https://www.asial.co.jp/image1.gif &mode=1" class="popupimg"><img src="https://www.asial.co.jp/image1.gif"></a>
<a href="https://www.asial.co.jp/image2.gif &mode=1" class="popupimg"><img src="https://www.asial.co.jp/image2.gif"></a>
<a href="https://www.asial.co.jp/image3.gif &mode=1" class="popupimg"><img src="https://www.asial.co.jp/image3.gif"></a>
</div>
なんとたったのこれだけです。
もちろん機能はこれだけではありません。プロパティをハッシュで渡すことで、多彩なエフェクトなど追加することができます。たとえば、以下の例の小さなアイコンをクリックしてみてください。
jQuery('#slide2').before('<div id="nav2">').cycle({
fx: 'scrollLeft',
speed: 'fast',
timeout: 0,
next: '#slide2',
pager: '#nav2',
pagerAnchorBuilder: function(idx, slide) {
return '<a href="#"><a href="https://www.asial.co.jp' + slide.src + ' &mode=1" class="popupimg"><img src="https://www.asial.co.jp' + slide.src + '"></a></a>';
}
});
このようにページャも自動で作成してくれます。各オプションの説明をしていきますと、
fx ... スクロール時のエフェクト
speed ... スクロールの速度
timeout ... 自動スクロールするまでの時間
next ... 「次へ」に値するHTML要素のID（「前へ」はprev）
pager ... ページャとなるHTML要素のID
pageAnchorBuilder ... ページャ用のコールバック関数
といった感じになります。詳しい情報は、jQuery Cycle Plugin – Option Referenceに一覧で載っていますのでこちらをご覧ください。
ちなみに、画像以外でもスライドを作成することは可能です。公式サイトに非常に多くのサンプルがありますので、色々試してみたい方はそちらを参考にしてみてください。
こんなに簡単にスライドショーができるなんて、写真を撮るのが楽しみになりますね。思い出に残っている写真などを使って、是非オリジナルのスライドショーを作成してみてください。
