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.

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

関連記事

no image

苦手なJavaScriptをイチから勉強してみる【イベント編】

この記事は約 1 分で読めます。 苦手なJavaScriptをイチから勉強してみる【基本準備編】の続きとしてメモします。 イチから「JavaScript」を学び直しをする為に記録を残しています。少しず …

no image

IllustratorとPhotoshopで刺繍風のイラストと文字を作ってみた。

この記事は約 1 分で読めます。布地に刺繍をしたみたいなイラストと文字をIllustratorとPhotoshopで作ってみました。 ※布地素材は既に用意している状態の説明です。

no image

気になるブラウザサイズ 集計結果。

この記事は約 2 分で読めます。 最近、Webサイトを作るのにどれ位の幅で作れば良いのかとても迷ってきました。 いろんな方のサイトをいじらせてもらいながら、表示確認をしていて驚く事もしばしば・・・。 …

no image

Facebookページに「お問い合せフォーム」を簡単設置♪

この記事は約 2 分で読めます。何気に始めたFacebookでは意外な人との繋がりが持てて、思ったより面白くて毎日開いて見てしまいます。 きっとそんな風に思っている方も多いのでしょう。 最近、Face …

no image

Google Mapの吹き出しを消してみた

この記事は約 1 分で読めます。 Google Mapをサイトに表示させる方法は、たくさんあると思います。 単純にGoogleMapを開いて、「ウェブサイトへの地図埋め込み用 HTMLコード」をそのま …