Webの記録

simplegallery.jsでシンプルだけど高機能なスライドショーを作ってみた♪

投稿日:

この記事は約 6 分で読めます。

今回は、数枚の画像でスライドショーを「simplegallery.js」で作ってみたいと思います。
名前の通りシンプルですが、なかなか高機能で取付けも簡単に出来たので、メモです♪

simplegallery.js設置イメージ

js配布サイト: Simple Controls Gallery – Dynamic Drive DHTML Scripts

設置方法。

下準備。

スライドしたい画像を数枚用意します。
スライドした枚数分だけ画像を用意します。サムネイル画像は今回ナシです。

jsファイルのダウンロード。

Simple Controls Gallery – Dynamic Drive DHTML Scriptsから「simplegallery.js」をダウンロードします。
「left.gif」「pause.gif」「play.gif」「right.gif」 「ajaxload.gif」も今回一緒にダウンロードしてみました。

headerの記述。

HTML ファイルのheaderでjsファイルの関連付けの記述。

<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/simplegallery.js"></script>
スライドショー用のScriptをheaderに記述。
<script type="text/javascript">
	var mygallery=new simpleGallery({
	wrapperid: "simplegallery1", /* ギャラリーを表示する要素のID名 */
	dimensions: [600, 400], /* 画像の幅、高さ(単位:ピクセル) */
	imagearray: [
				["画像のパス", "URL", "_new", "キャプション"], // URLとキャプションは省略可能
				["画像のパス", "", "", ""],
				["画像のパス", "", "", ""]
				],
	    autoplay: [false, 2500, 2], //[auto_play_boolean, delay_btw_slide_millisec, cycles_before_stopping_int]
	    persist: true,
	    fadeduration: 1000, //transition duration (milliseconds)
	    oninit:function(){ //event that fires when gallery has initialized/ ready to run
	    },
	    onslide:function(curslide, i){ //event that fires after each slide is shown
	        //curslide: returns DOM reference to current slide's DIV (ie: try alert(curslide.innerHTML)
	        //i: integer reflecting current image within collection being shown (0=1st image, 1=2nd etc)
	    }
	})
</script>
body部分に記述。

下記1行書くだけでOK!!本当にシンプルです。

<div id="simplegallery1"></div>
おまけでもう少しbody部分に追加します

画像の動きを制御するボタン操作が分らない人にも良いのかも。。。ちょっと親切??デザインはざっくりテストサンプルなんで、何もしていないですが・・・。

<ul>
	<li><a href="javascript:mygallery.navigate('next')">
次の画像へ進む</a></li>
	<li><a href="javascript:mygallery.navigate('prev')">
前の画像に戻る</a></li>
	<li><a href="javascript:mygallery.navigate(0)">
最初の画像に戻る</a></li>
	<li><a href="javascript:mygallery.navigate('playpause')">
再生/停止</a></li>
</ul>
CSSを記述。(配布サイトのを参考にいじると楽だと思います。)

適当に自分なりに整えます。

注意。

画像推移のボタンを付ける時、画像(「left.gif」「pause.gif」「play.gif」「right.gif」 「ajaxload.gif」)のパスに注意です。「simplegallery.js」の11行目と13行目を修正する必要な場合があります。

修正する箇所が少なく、配布サイトのものをそのまま使える感じでした。
自動再生の部分や、スライドする間隔、フェード移行時間あたりをいじっていろいろ試すと面白いです。

js配布サイト: Simple Controls Gallery – Dynamic Drive DHTML Scripts
[note]
【スライダー系の関連かもしれない記事】

[/note]

-Webの記録
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

WordPress 複数のサイドバーを使い分ける方法。

この記事は約 2 分で読めます。 WordPressのテーマを独自で作っていて、どのページも同じサイドバーでは面白くないなぁと思い…。 記事のページ(index.phpやsingle.php等)と固定 …

no image

初心者のアクセス解析勉強メモ【用語と簡単にサイトをチェックしてみた】

この記事は約 1 分で読めます。 最近、興味があるのは・・・アクセス解析関係。 Webサイトを作った後、運営していくのにはやっぱり重要!アクセス解析をして、そのサイトの現在の状態を見て、それから目標を …

no image

WordPress プラグイン「Dynamic To Top」で上に戻るボタンを簡単に設置♪

この記事は約 1 分で読めます。 よくいろんなサイトを閲覧していて、ページの下へスクロールしていくと・・・「上に戻る」ボタンを見かけます。 そこで今回は、Wordpressのプラグイン「Dynamic …

no image

WordPress 「この記事は●分で読めます」をプラグインなしで表示させたい時

この記事は約 1 分で読めます。 よく他の方のブログで記事の冒頭に「この記事は●分で読めます」という表示がされているのを見かけます。 これがあると、その記事を読むかブックマークするかを判断出来て便利だ …

no image

気になるブラウザサイズ。

この記事は約 1 分で読めます。最近、いくつかサイトを作らせて頂き・・・。 ちょっと他所のパソコンをいじらせて頂き、その画面表示にショックを受ける事がしばしば・・・。 日頃見ているパソコンと表示があん …