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.

関連記事

モバイル フレンドリー テストで合格しているのに、「スマホ対応」ラベルが付かない時

この記事は約 1 分で読めます。 スマホで検索していると「スマホ対応」と表示されるようになって、しばらく経ちました。 検索している時の順位も、「スマホ対応」と表示されてないページより、表示されているペ …

no image

WordPressプラグイン「Simple Map」でスマホ対応GoogleMapを簡単設置。

この記事は約 1 分で読めます。 GoogleMapは、いろいろとお世話になっています。ただスマホで時々面倒だと思うのが、スクロールしていてGoogleMapに何気に指が触れてしまった時。 画面の横幅 …

no image

WordPressでRSSフィードを便利に使うプラグイン。

この記事は約 1 分で読めます。 以前、「WordPressサイトでRSSフィードボタンを設置してみた♪」でRSSフィードボタンを設置しました。 その後、RSSフィード関係で便利そうなWordpres …

no image

Yahoo!アクセス解析を設定してみました!

この記事は約 1 分で読めます。 2013年10月30日にリリースされた「Yahoo!アクセス解析」。 まだまだリリースされて日が浅いのでGoogle Analyticsほどの資料が見つからないのです …

no image

検索エンジンに登録する方法。

この記事は約 1 分で読めます。 Webサイトを作った後にするコト。 いくつもあると思うのですが、今回は検索エンジンに登録する方法にチャレンジしたいと思います。 いろいろ方法をググっていたら、「Goo …