アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

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に一覧で載っていますのでこちらをご覧ください。

ちなみに、画像以外でもスライドを作成することは可能です。公式サイトに非常に多くのサンプルがありますので、色々試してみたい方はそちらを参考にしてみてください。

こんなに簡単にスライドショーができるなんて、写真を撮るのが楽しみになりますね。思い出に残っている写真などを使って、是非オリジナルのスライドショーを作成してみてください。