Webの記録

slideshow.jsを使って画像のスライドショーにチャレンジ。 

投稿日:

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

画像数枚のスライドショーをjQueryのライブラリを使って作ってみたいと思います。
たくさん方法があると思うので、いくつか試してみるつもりです。

まず今回は、「slideshow.js」と「mootools.js」で作るスライドショーです。

スライド画面イメージ

参考サイト:http://www.electricprism.com/aeron/slideshow/

設置方法。

下準備。

スライドしたい画像を数枚用意します。
サムネイル画像も表示したいので、同じ画像の大小を各1枚準備します。
今回は、5枚の画像のスライドショーを作るので、計10枚用意しました。

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

参考サイトのGoogle Codeより、ライブラリをダウンロードする。
今回は、一番単純な「slideshow.js」と「mootools-1.3.2-core.js」「mootools-1.3.2.1-more.js」 をjsフォルダに入れます。

headerの記述。

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

<script src="js/mootools-1.3.2-core.js"></script> 
<script src="js/mootools-1.3.2.1-more.js"></script>
<script src="js/slideshow.js"></script> 
スライドショー用のScriptをheaderに記述。
 
		   <script type="text/javascript">
 		   window.addEvent('domready', function(){ 	
		       var data = {  			
              '1.jpg': { caption: '1枚目の画像の説明' }, 	
             	   '2.jpg': { caption: '2枚目の画像の説明' },
  			   '3.jpg': { caption: '3枚目の画像の説明' }, 
 			   '4.jpg': { caption: '4枚目の画像の説明' }, 
			   '5.jpg': { caption: '5枚目の画像の説明' }, 
			}; 			
                     new Slideshow('overlap', data, { captions: { delay: 1000 }, delay: 3000, height: 画像の高さ, hu: 'images/', width: 画像の横幅 }); 
		    });
                ></script>
body部分に最初に表示する画像の設定を記述。

id名は、スライドするタイプを記述(今回は「overlap」。他に「noOverlap」「flash」「fold」「kenburns」「push」のどれかを記述。)
class名と headerで書いたnewの後の変数名を同じにする。

<div id="overlap" class="slideshow"><img src="images/1.jpg" alt="1" /></div>
cssで表示を整える。

cssで自分なりに表示を整えて、出来上がりです♪
 
一緒にダウンロードしたjsファイルを使って、「overlap」以外のものにするとまた違った見せ方が出来て面白いです♪

また、Lightbox, Slimboxとの連携も可能らしいのでいろいろな使い方が出来そうです。

-Webの記録
-, , ,

執筆者:


comment

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

This blog is kept spam free by WP-SpamFree.

関連記事

no image

Worepress 前後の記事へリンクをつけたい時。

この記事は約 1 分で読めます。 記事の下に「古い記事へ」「新しい記事へ」という前後の記事へのリンクを表示しています。 単純に投稿順で前後の記事へリンクをさせるのか、または開いている記事と同じカテゴリ …

no image

WebサイトのURLを変更した後 .htaccessの記述して新しいURLに転送してみる

この記事は約 2 分で読めます。 ずっと運営していたサイトのURLを都合により変更(ファイルを移動)させてしまった時、ブックマークから訪問してくれた人が困らないように新しいURLへ転送する事が必要にな …

no image

WordPressプラグイン「WP-Copyright-Protection」で右クリック・ドラック禁止でコピーガード

この記事は約 1 分で読めます。 以前、「右クリック禁止で画像のコピーガード」など、画像のお持ち帰りを禁止したい措置について記事を書きました。 3年ほど前の記事にもかかわらず、今も毎日閲覧数が多いです …

no image

苦手なJavaScriptをイチから勉強してみる【if文とfor文】

この記事は約 1 分で読めます。 苦手なJavaScriptをイチから勉強してみる【JavaScriptを外部ファイルにする】の続きとしてメモします。 イチから「JavaScript」を学び直しをする …

no image

WordPressでオリジナルテーマ作りにチャレンジ 2【切り分け編】

この記事は約 1 分で読めます。 WordPressのオリジナルテーマ作りをしています。 今回は、前回の【準備編】の続編です。 ※(x)html+cssの知識がある事が前提で書いています。 前回までで …