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

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

sponsors

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

記事作成:
記事URL:

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