+RECOMMEND
+RECOMMEND
+Ad
+OTHERS

無料ブログ作成サービス JUGEM

paperboy&co.
RSS 1.0
ATOM  0.3
<< September 2018 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 >>
<< Javascriptを覚えたい!でも参考書も難しい…。そんな方に対話式で学べるサイト「Codecademy」 | main | Apple創設者 スティーブ・ジョブズ追悼コメント >>
簡単にサムネイル付ギャラリーが作れるjQueryを使ったライブラリ「bxGallery」


サムネイル付のギャラリースクリプトはいくつもありますが、htmlを書き換えたり、新たにjsライブラリをいくつか組み込んだりと若干手間のかかるものあります。管理人がいくつか試した中で一番導入が簡単だったものを紹介します。



■bxGallery
http://bxgalleryplugin.com/



このライブラリはjQueryを利用しています。管理人が試した段階ではバージョン1.4.2で問題なく動作しました。導入は至って簡単。

ステップ1

こちらからjavascriptをダウンロードしてhtmlに読み込みます。
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/bxGallery.js"></script>

ステップ2

ギャラリーの写真をリストタグでマークアップします。
<ul class="gallery">
<li><img src="img/img1.jpg" /></li>
<li><img src="img/img2.jpg" /></li>
<li><img src="img/img3.jpg" /></li>
<li><img src="img/img4.jpg" /></li>
</ul>

ステップ3

タグの指定と詳細設定をjavascriptに書きます。
$(function() {
    $('ul.gallery').bxGallery({
        maxheight: 300, //サムネイルコンテナの高さ
        thumbwidth: 70, //サムネイルの幅
        thumbplacement: 'right', //サムネイルのフロート指定
        thumbcontainer: 70 //サムネイルコンテナの幅
    });
});
タグは任意なのでステップ2のように必ずリストタグで、というわけでもありません。
これで最低限の設定は完了です。上記の例では<ul class="gallery">が画像の表示エリアになるので、スタイルシートで写真のサイズに合わせてwidthの指定などを行いましょう。

詳細設定はこのほかにも、ローディング時の表示テキストや表示画像の設定、サムネイル見選択時の透明度設定などがあります。細かいことは公式サイトに記述してあります。

■bxGallery
http://bxgalleryplugin.com/


ここで注意することがいくつかあります。
サムネイル用のhtmlは自動的にjavascriptで記述されるので、サムネイルのほうに細かいスタイル指定を行いたい場合は、下記のクラスにあらかじめスタイルを指定しておく必要があります。
ul.thumbs {}
ul.thumbs li {}
#loading {} /*ロード画像用のコンテナ*/

例えばoverflowなどでスクロールバーを出したい場合時などに利用するといい感じになると思います。その他デザイン上の細かい調整は上記のclassと自分のデザインに合わせて行ってください。

サンプルでつくってみたものがこちら。
■bxGallery
http://tug.lomo.jp/test/test.html



簡単に導入でき、htmlの設定もシンプルに出来ているのでCMSへの組み込みなどにも応用できそうですね。

| スクリプト/プログラム | 23:34 | comments(0) | trackbacks(0) | - | - |はてなブックマーク - 簡単にサムネイル付ギャラリーが作れるjQueryを使ったライブラリ「bxGallery」 | このエントリーをはてなブックマークに追加









http://blog.tug.lomo.jp/trackback/990296