• かちびと.net

    拡大時にアコーディオンのように画像が広がるカルーセルを実装するjQueryプラグイン・Accarouselのご紹介。なかなか使い勝手の良いプラグインですね。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

拡大時にアコーディオンのように画像が広がるカルーセルを実装する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             /* ページャの次/前のナビゲーションを無効にする */

 }

オプションは上記の通り。デフォルトでは、拡大された画像のクリックが拡大画像を閉じるイベントハンドラになっていますけど、こちらは変更した方が良さそうですね。

尚、LESSファイルも同梱してあります。工夫したら素敵なカルーセルが出来そう。ご利用は以下よりどうぞ。

Accarousel

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services