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

-Webの記録
-, ,

執筆者:


comment

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

This blog is kept spam free by WP-SpamFree.

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

関連記事

no image

LIghtBox風画像ギャラリーを「ColorBox」で作ってみた♪

この記事は約 1 分で読めます。LightBoxのように、画像を拡大表示出来るjQueryプラグインを探してみました。 たくさんLightBox風のライブラリはありましたが、今回は「ColorBox」 …

no image

Facebookの個人プロフィールに勤務先のFacebookページをリンクさせる方法

この記事は約 1 分で読めます。 Facebookの個人プロフィールに、勤務先を入れた時に勤務先のFacebookページとうまくリンクされない事があります。 案外、ココがクリックされているようで・・・ …

no image

lang属性に指定できる言語コード

この記事は約 1 分で読めます。 忘れた頃に海外向けの小規模な案件で、外国語のページ制作のお話があったりします。 そんな時に「lang属性に指定できる言語コード」を毎回調べるのが面倒なので、自分用のメ …

no image

WordPressテーマエディタをプラグイン「Advanced Code Editor」で見やすく♪

この記事は約 1 分で読めます。 WordPressでオリジナルテーマを作成する時、WordPressのテーマ編集画面のエディタを使用しているのですが・・・ちょっと見辛いなぁと思っていました。 今回何 …

no image

WordPressでオリジナルテーマ作りにチャレンジ【準備編】

この記事は約 1 分で読めます。WordPressに少し慣れてきたので、そろそろオリジナルテーマ作りにチャレンジしようと思います。 今までのテーマは、デフォルトであった「twentyten」や「cor …