スライドの切り替えが印象的なjQueryの画像ギャラリー「Sliced Image Slider」

クチコミサイト構築「エディタ・エンタープライズ」
デモサイトトップ
制作技術
スライドの切り替えが印象的なjQueryの画像ギャラリー「Sliced Image Slider」

クチコミサイト構築「エディタ・エンタープライズ」デモサイト

日本初のブログ自動収集システム「エディタ・エンタープライズ」により、簡単・低コスト・SEO対策が可能な口コミサイトが構築可能です。
ブロガー別の記事一覧やカテゴリ別、月別、取得画像別などさまざまな切り口で見せることができるので、映画や商品のキャンペーンをはじめ、テーマ別のポータルサイトを構築できます。

2009年09月28日｜記事提供：すくえあ

画像ギャラリーの切り替えはフェードや横からのスライドなどいろいろあります。
JavascriptライブラリjQueryプラグインの「Sliced Image Slider」を使用すると、スライスされた画像が上下左右から現れるようなエフェクトが可能です。

使用方法
Sliced Image Sliderからファイル一式をダウンロードします。

あとは上記id内に画像を記述すれば完成です。

また表示する画像の幅高さに応じて以下のようにCSSを記述します。

またオプションは以下のようなものがあります。



   $("#id名").slicer({

      direction: 'topDown', //移動方向 bottomUp,leftRight,rightLeft

      duration: 1000, //スライド移動時間

      sliceDelay: 100, //スライス移動時間

      removeSliceDirection: 'bottomUp',  //スライス削除方向

      numberOfSlices: 10 //スライス枚数

    });

スライドの切り替えが印象的なjQueryの画像ギャラリー「Sliced Image Slider」サンプル

[ 元記事 ]

twitterにつぶやく｜はてなブックマーク｜この記事をクリップ！｜ Yahoo!ブックマークに登録｜ del.icio.usに追加する