イメージギャラリーを作成する超軽量のjQueryプラグイン「bxGallery」
bxGalleryはサムネイル付きのイメージギャラリーを作成するためのjQueryプラグインです。
htmlでリストを作成し、パラメータを指定してあげるだけで動作するようです。
オプションでは、サムネイルの不透明度やサムネイルの位置（上下左右）などが指定できるようです。
詳しくは以下
使い方ですが、まずhtmlでリスト要素を作成します。
2 | <li><img src="path/to/image1.jpg"></li> |
3 | <li><img src="path/to/image2.jpg"></li> |
4 | <li><img src="path/to/image3.jpg"></li> |
5 | <li><img src="path/to/image4.jpg"></li> |
次にプラグインを使用するおまじないをhead部分に追加します。
2 | $(document).ready(function(){ |
3 | $('#pics').bxGallery(); |
上記ソースの後ろにオプションの設定を追加します。
06 | thumbplacement: 'bottom', |
07 | thumbcontainer: '400', |
09 | load_text: 'loading...', |
10 | load_image: 'spinner.gif', |
各パラメータの説明は以下になります。
- maxwidth
- メインの画像の横幅を指定します。
- maxheight
- メインの画像の高さを指定します。
- thumbwidth
- サムネイル画像の横幅を指定します。
- thumbcrop
- trueに設定した場合にサムネイルを正方形になるように切り取ります。
falseの場合は縦横比を維持します。
- croppercent
- thumbcropにtrueを指定した場合のみ使用します。0から1の範囲を指定。サムネイルをトリミングする際の割合を指定します。
- thumbplacement
- メイン画像の位置を指定します。位置は上下左右のどこかになります。パラメータには(‘left’, ‘right’, ‘top’, ‘bottom’) のどれかを指定します。
- thumbcontainer
- サムネイルを表示するコンテナの幅を指定します。
- opacity
- サムネイル画像の透明度を指定します。サムネイルにマウスオーバーすると指定した透明度から、元の画像にフェードインします。
- load_text
- イメージギャラリーを読み込んでいる際にテキストを表示する事ができます。このパラメータで表示するテキストの内容を指定できます。
- load_image
- イメージギャラリーを読み込んでいる際に画像を表示する事ができます。このパラメータはload_textよりも優先されます。
- wrapperclass
- 動的に外側に作成されるdivのidを指定します。
以上で設定は完了です。
かなり使い勝手がよさそうなので、ギャラリー表示を検討されている方はいかがでしょうか。
この記事が気に入ったら
いいね！しよう
最新情報をお届けします
