<< なめらかにスクロールするjQuery | main | スライドショーを行うjQuery Blinds >>

自動でスライドショーをするiViewというjQuery

2013.08.16 Friday | by こも
自動スライドショーをしてくれるiView SliderというjQueryを使ってみました。



画像のスライドショーだけでなく、テキストに動きをつけて入れられるというのが特徴です。
いろいろ便利なこともできる反面、組み込み方も複雑なので、少しまとめてみました。



1.iViewをダウンロードしてきて解凍

iViewの公式サイトからダウンロードしてきて、解凍して使います。
「css」「img」「js」などの必要なフォルダをコピーしてきます。


2.解凍したjsやcssにパスを通します

<link rel="stylesheet" href="css/iview.css" />
<link rel="stylesheet" href="css/skin 1/style.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/raphael-min.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script src="js/iview.js"></script>


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

<div data-iview:image="画像1.jpg"></div>
<div data-iview:image="画像2.jpg"></div>


テキストのアニメーションをつける場合は、iview-captionクラスを使います。
data-xでX座標、data-yでY座標、data-transitionで動きなどを定義します。

<div data-iview:image="画像1.jpg">
	<div class="iview-caption" data-x="80" data-y="275" data-transition="wipeRight">これは画像1です。</div>
</div>

<div data-iview:image="画像2.jpg">
	<div class="iview-caption" data-x="80" data-y="275" data-transition="wipeLeft">これは画像2です。</div>
</div>



4.スクリプトを実行

スライドショーのポーズタイムなどを設定して実行します。

<script>
	$(document).ready(function(){
		$('#iview').iView({
			pauseTime: 7000,
			directionNav: false,
			controlNav: true,
			tooltipY: -15
		});
	});
</script>


5.画像のサイズに合わせてCSSを変更

css/skin 1/style.cssなどにキャンバスのサイズが定義されているので、画像のサイズに合わせて変更します。



上記のことをやって、5枚の画像を一つのスライドショーにしたサンプルソースは次の通りになります。


<html>
<head>
		<link rel="stylesheet" href="css/iview.css" />
		<link rel="stylesheet" href="css/skin 1/style.css" />
		<script src="js/jquery-1.7.1.min.js"></script>
		<script type="text/javascript" src="js/raphael-min.js"></script>
		<script type="text/javascript" src="js/jquery.easing.js"></script>

		<script src="js/iview.js"></script>
		<script>
			$(document).ready(function(){
				$('#iview').iView({
					pauseTime: 7000,
					directionNav: false,
					controlNav: true,
					tooltipY: -15
				});
			});
		</script>
</head>

<body>
	<div class="container">
		<div id="iview">
			<div data-iview:image="myimage/pict01.jpg" data-iview:transition="slice-top-fade,slice-right-fade">
				<div class="iview-caption caption1" data-x="80" data-y="200">iViewを使ってみた</div>
				<div class="iview-caption" data-x="80" data-y="275" data-transition="wipeRight">これは右ワイプ</div>
				<div class="iview-caption" data-x="254" data-y="320" data-transition="wipeLeft">これは左ワイプ</div>
			</div>

			<div data-iview:image="myimage/pict02.jpg" data-iview:transition="zigzag-drop-top,zigzag-drop-bottom" data-iview:pausetime="6000">
				<div class="iview-caption caption5" data-x="60" data-y="240" data-transition="wipeDown">CSSをいじってiViewの描画サイズを変更</div>
				<div class="iview-caption caption6" data-x="300" data-y="310" data-transition="wipeUp"><a href="#">これはskin 1/style.css</a></div>
			</div>

			<div data-iview:image="myimage/pict03.jpg">
				<div class="iview-caption caption4" data-x="50" data-y="80" data-width="312" data-transition="fade">pausetimeも変更できる</div>
				<div class="iview-caption blackcaption" data-x="50" data-y="135" data-transition="wipeLeft" data-easing="easeInOutElastic">ああああああああああ</div>
				<div class="iview-caption blackcaption" data-x="50" data-y="172" data-transition="wipeLeft" data-easing="easeInOutElastic">いいいいいいいいいい</div>
				<div class="iview-caption blackcaption" data-x="50" data-y="209" data-transition="wipeLeft" data-easing="easeInOutElastic">ううううううううううううううう</div>
				<div class="iview-caption blackcaption" data-x="50" data-y="246" data-transition="wipeLeft" data-easing="easeInOutElastic">ええええええええええええええええええ</div>
				<div class="iview-caption blackcaption" data-x="50" data-y="283" data-transition="wipeLeft" data-easing="easeInOutElastic">おおおおおおおおおお</div>
			</div>

			<div data-iview:image="myimage/pict04.jpg">
				<div class="iview-caption caption7" data-x="0" data-y="0" data-width="180" data-height="480" data-transition="wipeRight"><h3>左側にテキスト領域</h3>いろんなことができて便利 <b><i>使い方はdocumentationに書いてある</b></i>!<br><br>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</div>
			</div>

			<div data-iview:image="myimage/pict05.jpg">
				<div class="iview-caption caption5" data-x="60" data-y="150" data-transition="wipeLeft">最後までいくと…</div>
				<div class="iview-caption caption6" data-x="160" data-y="230" data-transition="wipeRight">あとは繰り返し</div>
			</div>
		</div>
	</div>

</body>
</html>


長々と書いているのは、テキストに動きをつけているだけです(^^;;
かなり動きのあるスライドショーができました。

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


Comment
Add Comment









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