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

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

sponsors

使用方法

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で別途作成する必要があります。
オプションは以下の通りです。

サンプル

Accordion

水平方向もOKのアコーディオンjavascript「Accordion v1.0」

Fisheye

Fisheyeを実現するjavascriptライブラリ「dojo」

ColorPicker

色をHEX、RBG、HSBで表示するカラーピッカーjavascript「mooRainbow」

Validation

フォームの値を識別するjavascript「validation.js」

sponsors

Javascriptサンプルページ一覧
skuare.net