華麗なイメージギャラリー＆スライドショーを実現する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はリンクしない）

サンプル

Accordion

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

Fisheye

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

ColorPicker

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

Validation

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

Javascriptサンプルページ一覧

skuare.net