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

DreamweaverCS4にHTML5+CSS3のコードヒント・ドキュメントタイプを!

この記事は約 1 分で読めます。 コーディングの時に主に「Dreamweaver」を使用しています。バージョンは、CS4とCS5。 HTML5をぼちぼち・・・なところで、CS5は最初から「HTML5」 …

no image

MacでもWindowsでもOKな「AMPPS」でローカル環境を作ってみる

この記事は約 1 分で読めます。 以前、ローカル環境では「XAMMP」と「MAMP」の環境を作ってみました。 今回は、MacでもWindowsでも使える「AMPPS」でローカル環境を作ってみました。 …

no image

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

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

no image

WordPressサイトでパンくずリストを簡単設置♪

この記事は約 1 分で読めます。 Webサイトで、よく階層が深くなってくると「パンくずリスト」を付けます。 WordPressサイトでも簡単にパンくずリストを付けられないかな?という事で、プラグインを …

no image

WordPress 「Contact Form7」で送信完了画面と自動送信メールを試してみた

この記事は約 2 分で読めます。 WordPressの「Contact Form7」は、お問い合せフォームを簡単に取り付ける事が出来るという便利なプラグインです。 以前から利用しているのですが、最近ま …