jQuery スライドショープラグイン Cycle2

トップ・ページのスライドショーに使うプラグインをいろいろと探しまわって、一部は実際に使ってみたりもして現在の Cycle2 に落ち着きました。選定の条件は概略以下のようなものでした。

HTML5 Document Typeへの移行に当たって、従来のFlash Playerからスマートフォンを含めたマルチ・プラットフォームで使えるものに替える。
javascriptライブラリーが必要な場合はjQueryとする。
画像リストのマーク・アップが簡易で、シーズン毎にモジュール化出来るもの。そしてその切り替えが容易なもの。
トップ・ページで使うこともあって、イニシャル・スタートが早いもの。全画像を読み込んでからスタートするのではなく、後続のスライドは後読みが出来るもの。

最近のスライドショー・プラグインはHTML5対応を考えたものが多く上位３つの条件に嵌まったものがほとんどでした。問題は最後の条件にマッチするものが少なかったように思います。以前に使っていたFLASH形式のものでは気にならなかったトップ・ページの表示速度が、実際に導入してみると気になりました。

導入したプラグインは、Cycle2 というフリーのプラグインです。デモやAPIの解説も充実していて導入に苦労することは余り在りませんでした。

Demosのページで自分の要件に合ったデモとそのAPIの解説を見ながらマーク・アップすれば動くでしょう。
DownloadのページからProduction Versionをダウンロードして適当なサーバーのディレクトリーにアップ・ロードします。ここでは説明の都合上 js/cycle2 とします。

<head>部分でアップロードしたpluginを読み込む指定をします。
```
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <mt:If name="main_index">
        <script type="text/javascript" src="<mt:BlogURL />js/cycle2/jquery.cycle2.min.js"></script>
    </mt:If>
```
当サイトの場合は Progressive Image Loading を使っていますのでスライドショーを表示する場所に下記のマーク・アップを行っています。
```
<div class="cycle-slideshow"
    data-cycle-fx="fadeout"
    data-cycle-timeout="5000"
    data-cycle-loader="true"
    data-cycle-progressive="#slideshow_images"
    data-cycle-speed="1500">
    <mt:Include module="スライドショー春" />
</div>
```
data-cycle-fx: 画像遷移のエフェクト効果を指定（fadein,fadeout,scrollHorz等)
data-cycle-timeout: 各スライドの表示時間(ミリ秒)
data-cycle-loader: Progressive Image Loadingの場合は true
data-cycle-progressive: スライド・リストの在る場所を示すID
data-cycle-speed: スライドの遷移する時間(ミリ秒)

上記でインクルードされているモジュールではスライド・リストのマーク・アップをしています。モジュールは春夏秋冬でそれぞれの画像を登録しています。春のモジュールの例（一部）は下記のようになっています。モジュール名は「スライドショー春」です。
```

<img src="<mt:BlogURL />slideimages/spring/_MG_2349.JPG" title="オオイヌノフグリ" width="360" height="240" alt="" />

<script id="slideshow_images" type="text/cycle">
<img src="<mt:BlogURL />slideimages/spring/_MG_3141.JPG" title="アケビ" width="360" height="240" alt="" />
<img src="<mt:BlogURL />slideimages/spring/_MG_4557.JPG" title="福岡堰" width="360" height="240" alt="" />

～

<img src="<mt:BlogURL />slideimages/spring/IMG_9134.JPG" title="五斗蒔田の桜" width="360" height="240" alt="" />
</script>
```

jQuery スライドショープラグイン Cycle2

タグ:

トラックバックURL

コメントする

jQuery スライドショー プラグイン Cycle2

タグ:

トラックバックURL

コメントする

jQuery スライドショープラグイン Cycle2