Javascript(Ajax)でお洒落なスライドショー [SmoothGallery] を試してみる。
本日のはてブでブックマーク数がすでに400を超えている下記エントリーより
お洒落なスライドショーを実現できるJavascriptサンプルを試してみました。
ネタ元
WEB制作者とブロガーの『遊び心をくすぐる』26のブックマークまとめ
by ホームページを作る人のネタ帳
今後、備忘録予定のAjaxライブラリlightbox.jsはすでに自分のブログで活躍中ですが、今回のSmoothGalleryは初お目見えでございます。いつも「あとで」のタグで止まっているこれらのテクニックをマイブックマーク内で埋もれる前に備忘録。
(1)まずは必要なライブラリをダウンロード
JonDesign's (Javascript) SmoothGallery内のダウンロードページより
ライブラリをダウンロード。（ダウンロードはこちらのページです。）
windowsならzip形式、macならtar/gz形式でダウンロード→解凍。
(2)各ファイルをリンクさせる
次に実装したいページのhead内に以下のjsファイルをリンクさせ、
<script src="scripts/mootools.js" type="text/javascript"></script> <script src="scripts/jd.gallery.js" type="text/javascript"></script>
以下のcssファイルもリンクさせておきます。
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" />
管理人の場合、新たにsampleフォルダを作成して、
フォルダ内にscriptsフォルダとcssフォルダを配置しました。
以上で前準備は完了。
(3)htmlソースを作成
続いてスライドさせたい写真を配置するhtmlソースを記述。
<div id="myGallery"> <div class="imageElement"> <h3>Item 1 Title</h3> <p>Item 1 Description</p> <a href="mypage1.html" title="open image" class="open"></a> <img src="images/brugges2006/1.jpg" class="full" /> <img src="images/brugges2006/1-mini.jpg" class="thumbnail" /> </div> <div class="imageElement"> <h3>Item 2 Title</h3> <p>Item 2 Description</p> <a href="mypage2.html" title="open image" class="open"></a> <img src="images/brugges2006/2.jpg" class="full" /> <img src="images/brugges2006/2-mini.jpg" class="thumbnail" /> </div> </div>
上のソースを見るとわかると思いますが、
myGalleryという枠内で「Item 1 Title」と「Item 2 Title」という2枚の写真がスライドショーされるというイメージ。ちなみに「Item 1 Title」というのは写真のタイトル、「Item 1 Description」というのは写真の説明文です。適宜変更しましょう。
また、上のソースでは2枚だけ設定していますが、枚数を増やしたい場合には同じソースで量産するだけ。
そして、スライドを手動にしたいのか、自動にしたいのかのJavascriptをbody内に記述。
以下は手動でスライドさせるコードです。
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: false
});
}
window.onDomReady(startGallery);
</script>
その他、自動でできるコードはエントリ下部にリンクさせています。
デフォルトではメイン画像のサイズが460x345で設定されているので、サイズを変更する場合には、jd.gallery.cssの#myGalleryを以下のように変更しておきましょう。
#myGallery
{
width: 400px !important; ←任意の長さ
height: 200px !important; ←任意の高さ
}
あとはフォルダごとアップロードしたらOK！
取り急ぎサンプルを試してみましたが、サイト内のgetting startedにて英語ですが、
使い方も丁寧に書かれています。
管理人は英語は読めませんが、何となく言わんとしていることがわかりました。
ちなみにココでスライドの手動、自動のコードも書かれています。
最後に同梱されているphpファイルで写真のサムネイルを生成できるっぽいんだけど、
ちょっと今はわかりません...。
ただ、このphpを使うときはキャッシュ設定するのを忘れるな！
というようなことが書かれているようです...
関連エントリー
トラックバック(0)
このブログ記事に対するトラックバックURL:
http://km33.net/mt/mt-tb.cgi/217
コメントする
お気軽にコメントをどうぞ！
