2014/09/25

一風変わったスライドショーを実装できるjQueryプラグイン『jquery-hex-galler』

一風変わったスライドショーを実装できるjQueryプラグイン『jquery-hex-galler』

画像を六角形の蜂の巣のようにスライド表示出来るjQueryプラグイン『jquery-hex-galler』の導入方法を紹介します.

目次

ダウンロード

https://github.com/morris821028/jquery-hex-galleryにアクセスし,右側のDownload ZIPからZIPからファイルをダウンロードします.

設置方法

ダウンロードしたファイルを解凍し,CSSファイルとJavaScriptファイルを読み込みます.

同時に,jQuery本体も読み込んでください.

<!-- CSS読込 -->
<link rel="stylesheet" href="css/style.css">

<!-- スクリプト読込 -->
<script src="js/jquery-1.11.0.js"></script>
<script src="js/jquery.hex.gallery.js"></script>
<script src="js/jquery.lazyload.js"></script>
<script src="js/jquery.als.link-1.6.js"></script>

さらに,プラグインの設定を記述するタグを作成します.

<script type="text/hex-gallery">
&lt!-- ここに処理を記述 -->
</script>

準備が出来たところで,設定方法を紹介します.

{
  "cover": {"title": "トップに表示する文字列", "class": "クラス名"},
  "photo": [
    {"ポップアップ文字列": "画像のパス"},
    {"ポップアップ文字列": "画像のパス"}
  ]
}

このように記述します.
3ページ分のスライドを設定してみると以下のようになります.

{
  "album" : [
      {
        "cover": {"title": "トップに表示する文字列", "class": "hex-1"},
        "photo": [
          {"ポップアップ文字列": "http://dummyimage.com/200x140/000/fff"},
          {"ポップアップ文字列": "http://dummyimage.com/200x140/000/fff"}
        ]
      },
      {
        "cover": {"title": "トップに表示する文字列", "class": "hex-2"},
        "photo": [
          {"ポップアップ文字列": "http://dummyimage.com/200x140/000/fff"},
          {"ポップアップ文字列": "http://dummyimage.com/200x140/000/fff"},
          {"ポップアップ文字列": "http://dummyimage.com/200x140/000/fff"}
        ]
      },
      {
        "cover": {"title": "トップに表示する文字列", "class": "hex-3"},
        "photo": [
          {"ポップアップ文字列": "http://dummyimage.com/200x140/000/fff"},
          {"ポップアップ文字列": "http://dummyimage.com/200x140/000/fff"}
        ]
      }
  ]
}

デモ

動作デモは以下のページにあります

http://morris821028.github.io/jquery-hex-gallery/

まとめ

スライドショーは様々な種類のものがありますが,こういったデザインのものはあまり見かけないので新鮮でいいかもしれません.

カテゴリーごとにスライドショーを作成したい場合は検討してみてはいかがでしょうか.