<< 自動でスライドショーをするiViewというjQuery | main | 可変グリッドのvgridというjQuery >>

スライドショーを行うjQuery Blinds

2013.08.16 Friday | by こも
もう一つスライドショーを行ってくれるjQueryです。

iViewは自動でスライドショーを行ってくれましたが、今度はサムネイルをクリックするとその画像に切り替わるjQuery Blindsを使ってみました。





コードも比較的分かりやすくて、組み込み安かった印象です。


1.jQuery Blindsをダウンロード

jQuery Blindsの公式サイトからダウンロードしてきます。
[Working example]をダウンロードしてくると、jquery.blinds-0.9.jsだけでなくjQuery本体のjquery-1.4.1.jsもついてきます。

2.headに必要なファイルのパスを通す

  <script language="Javascript" type="text/javascript" src="js/jquery-1.4.1.js"></script>
  <script language="Javascript" type="text/javascript" src="js/jquery.blinds-0.9.js"></script>


3.使用する画像をセット

任意のクラス名(下記の例はslideshow)で画像をリスト定義します。

<div class="slideshow"> 
   <ul> 
	  <li><img src="myimage/pict01.jpg" alt="ビーチ" /></li>
	  <li><img src="myimage/pict02.jpg" alt="カヤック" /></li>
	  <li><img src="myimage/pict03.jpg" alt="海の中" /></li>
   </ul> 
</div> 


4.画像の切り替えボタンとなるサムネイルを定義

onclickblinds_change();を呼び出します。

このとき、return false;も追加します。
これがないと、ページのトップまで移動して、その場で画像が切り替わるという機能が実現しません。

<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(0); return false;">
<img src="myimage/pict01.jpg" width="60px" alt="ビーチ" />
</a>

<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(1); return false;">
<img src="myimage/pict02.jpg" width="60px" alt="カヤック" />
</a>

<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(2); return false;">
<img src="myimage/pict03.jpg" width="60px" alt="海の中" />
</a>


5.blindsをロード
<script type="text/javascript">
	$(window).load(function () {
		$('.slideshow').blinds();
	})
</script>


これらをつなぎ合わせると、次のようなコードになります。
<html>
<head>
  <script language="Javascript" type="text/javascript" src="js/jquery-1.4.1.js"></script>
  <script language="Javascript" type="text/javascript" src="js/jquery.blinds-0.9.js"></script>
</head>

<body>
	<!-- 表示部分 -->
	<div class="slideshow"> 
	   <ul> 
		  <li><img src="myimage/pict01.jpg" alt="ビーチ" /></li>
		  <li><img src="myimage/pict02.jpg" alt="カヤック" /></li>
		  <li><img src="myimage/pict03.jpg" alt="海の中" /></li>
	   </ul> 
	</div> 
	<br>
	<!-- サムネイルボタン -->
	<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(0); return false;">
	<img src="myimage/pict01.jpg" width="60px" alt="ビーチ" />
	</a>

	<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(1); return false;">
	<img src="myimage/pict02.jpg" width="60px" alt="カヤック" />
	</a>

	<a href="#" class="change_link" onclick="$('.slideshow').blinds_change(2); return false;">
	<img src="myimage/pict03.jpg" width="60px" alt="海の中" />
	</a>

	<!-- ロード -->
	<script type="text/javascript">
		$(window).load(function () {
			// start the slideshow
			$('.slideshow').blinds();
		})
	</script>

</body>
</html>


iViewに比べて、比較的シンプルな感じですね。

3枚のサムネイルがあって、それをクリックするとその画像に切り替わります。


設置サンプルはこちらになります。


Comment
Add Comment









Sponsored Link
Recommend
PHP 逆引きレシピ (PROGRAMMER'S RECiPE)
PHP 逆引きレシピ (PROGRAMMER'S RECiPE) (JUGEMレビュー »)
鈴木 憲治,安藤 建一,山田 直明,八木 照朗,山本 義之,河合 勝彦
Recommend
Recommend
Powered
無料ブログ作成サービス JUGEM