skuare.net

華麗なイメージギャラリー＆スライドショーを実現するjavascript「SmoothGallery」

ブログでは写真を掲載するケースが多いですが、奇麗にかつ見やすく表示するのは困難をともないます。
JonDesignが提供するSmoothGalleryでは華麗なイメージギャラリーに加えて、スライドショーも実現できます。

使用方法
SmoothGallery のDownloadからファイル群をダウンロードし、解凍すると「css」「scripts」などが出てきます。
このうち「scripts」から jd.gallery.jsとmootools.jsを、「css」からjd.gallery.cssをアップロードし、同時にheadに挿入します。
また「css」フォルダ内の「img」フォルダはjd.gallery.cssと同じフォルダにアップロードするか、jd.gallery.cssのimgの指定を絶対パスにしてください。
次に表示したい画像を以下の様に指定します。
<div id="myGallery">
<div>
<!-- ここから表示したい画像分繰り返す -->
<div class="imageElement">
<h3>タイトル</h3>
<p>説明</p>
<a href="画像のリンク先" title="open image" class="open"></a>
<img src="画像URI" class="full">
<img src="サムネイル画像URI" class="thumbnail">
<!-- ここまで表示したい画像分繰り返す -->
</div>
さらにscriptとして以下を書き込みます。
<script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: false
});
}
window.onDomReady(startGallery);
</script>
イメージギャラリーの上部に表示されるサムネイル画像は高さ100px、幅75pxで別途作成する必要があります。

オプションは以下の通りです。
timed: false //一定の時間で次の画像に移行（falseはなし）
showArrows: true, //矢印の表示（trueはする）
showCarousel: false, //上部に表示されるサムネイル（falseは非表示）
embedLinks: false, //画像へのリンク（falseはリンクしない）
華麗なイメージギャラリー＆スライドショーを実現するjavascript「SmoothGallery」

｜ ｜ ｜ ｜ ｜ ｜

前の記事：テキストを書き換え可能にするjavascript「inLineEdit Plugin」
次の記事：画像に反射効果を与えるjavascript「Reflection.js」

関連記事

• [mootools]SimpleViewGallery
• [mootools]Slide Show
• [mootools]MooPiX
• [mootools]Imago
• Windows Vistaライクな画像ギャラリーjavascript「ImageFlip」