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

Creative Cloud デスクトップアプリケーションが何も表示しなくなったとき

この記事は約 1 分で読めます。 Adobe Creative Cloudを使用していて、ディスクトップから起動させようとすると、画面が真っ白になってしまいました。 それぞれ単体のソフト(Photos …

no image

別窓でリンク先のページをポップアップで開きたいとき

この記事は約 1 分で読めます。 よくリンク設定で、「target=”_blank”」を入れて別タブで開くようにすることは多いですが・・・。 今回、たまたまポップアップでリンク …

no image

WordPressプラグイン「Easing Slider」でスライドショー簡単設置

この記事は約 1 分で読めます。 WordPressでカッコいいスライドショーを簡単に実現出来るプラグイン「Easing Slider」があったので、メモしておきます。 有料版もあるようですが、無料版 …

no image

WordPressでシンプルな自作SNSボタンを設置してみた

この記事は約 1 分で読めます。 ブログの記事下に、いろんなSNSアイコンをよく見かけます。 このブログにも付けていたのですが、時々ちょっと重たさを感じていたのですが、先日書いた記事「WordPres …

no image

IE6で透過pngを表示してみました♪

この記事は約 1 分で読めます。IE6対策をいつまですれば良いのかなぁというところですが、まだもう少しIE6を意識してサイトを作ってます。 今回は、IE6ではキレイに表示されない透過pngをキレイに表 …