拡大時にアコーディオンのように画像が広がるカルーセルを実装するjQueryプラグイン・Accarousel

クリックで画像を拡大する際に
アコーディオンのように広がる
カルーセルを実装するjQueryの
プラグイン・Accarousel。機能
はシンプルですが、動きが好み
だったので備忘録。

カルーセルを実装するjQueryプラグインです。

Accarousel

見た目は普通のカルーセルですが、画像をクリックすると以下のように拡大されます。

なんと言うか、横にブワッと広がる感じ。ブワッと。

頭悪いから上手く言えないのでサンプル見てください。

Sample

コード

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type="text/javascript" src="jquery.cjAccarousel.min.js"></script>

本体とプラグインを読み込みます。

$('#foo').cjAccarousel();

あとはカルーセルを包括するボックス要素をセレクタ指定すればいいだけ。

$('#foo').cjAccarousel(
  {
    stand         : '.stand',        /* サムネイルのa要素のclass*/
    panel         : '.detail-panel', /* 拡大画像を包括するボックスのclass   */
    pagerClass    : 'pager',         /* ページャのclass */
    x             : '.detail-panel', /* 拡大した画像を閉じる要素の指定 */
    groupOf       : 5,               /* グループ化するサムネイルの数*/
    scrollSpeed   : 1000,            /* カルーセルのスピード */
    ease          : 'swing',         /* Easingプラグインを併用する時に指定するエフェクト */
    flyOutGap     : 3,               /* 閉じた際に間隔を作るみたい */
    nextPrev      : true             /* ページャの次/前のナビゲーションを無効にする */
  
 }