シンプルなスライドショーから変わったエフェクトのスライドショーも簡単に実装できるjQueryプラグイン-Rhinoslider

Posted
2012-09-12

シンプルなスライドショーや少し変わったエフェクトのスライドショーなどを、ジェネレーターを使って簡単に実装できる、Rhinoslider というjQueryのプラグインを見つけたので使い方などをまとめてみました。

pontoffeltier/Rhinoslider: The most flexible jQuery slider/slideshow

Rhinosliderは、エフェクトやアニメーション時間などのオプション設定を画面内のGeneratorで選択すると、コードを出力してくれる親切な形になっています。画面内で設定したスライドショーのプレビューもでき、そのプレビューのデモファイルもダウンロードできます。

※スライドショーのプレビューのサイトは閉鎖されてしまったようです。プラグイン自体はGitｈubよりダウンロード可能です。

Generatorでコードの生成をする

~~「Demo & Download」~~のページを開きます。

Generator の所で”Animation” “Controls” “Bhaviour” “Caption” “Advanced” を設定できるようになっています。ロードのボタンをクリックでプレビューができます。

Generatorの箇所

Animation

Animation でスライドのエフェクトやその動き方、時間などを設定できます。

effect: は以下のようなエフェクトを設定できるようになっています。

none　→何もエフェクトなし
fade　→フェードアウトフェードイン
slide　→横にスライド
kick　→横から押し出されるようなエフェクトで横にスライド
transfer　→横から小さく出現して中央で拡大しスライド

transfer　→横から小さく出現して中央で拡大しスライド

shuffle　→サイコロ状にバラバラになって入れ替わる

shuffle　→サイコロ状にバラバラになって入れ替わる

explode　→サイコロ状にバラバラになって入れ替わる。shuffleよりまとまった印象

explode　→サイコロ状にバラバラになって入れ替わる

tuneOver　→一方向から紙芝居のようにスライドして入れ替わる
chewyBars　→一方向から消えていって、また一方向から出現する

chewyBars　→一方向から消えていって、また一方向から出現する

effectTime:でエフェクトのスピード、showTime:で画像を見せる時間の設定ができます。
後は選択したエフェクトによって詳細設定できる項目が変わってきます。

Controls

Controls でページャー Prev Next などのコントロール表示の設定ができます。
controlsPlayPause:をtrueで再生ボタンを表示、falseで非表示になります。
controlsPrevNext:をtrue でPrev Next ボタンの表示、falseで非表示になります。その下の項目で表示の名前を変更できます。
showBullets:をhover でマウスオーバー時にページャーを表示、alweys で常時表示になります。never で非表示になります。
controlsKeyboard:をtrueでキーボードで画像の送ったり戻したりの操作が可能になります。
controlsMousewheel:をtrueでマウスホイールで画像画像の送ったり戻したりの操作が可能になります。
showControls:をhover でマウスオーバー時にPrev Next ボタンを表示、alweys で常時表示になります。never で非表示になります。

Bhaviour

Bhaviourで自動再生などを設定できます。

autoPlay:をtrue でスライドショーが自動再生されます。
cycled:をtrue でスライドショーが繰り返し再生されます。
pauseOnHover:をtrue でマウスオーバー時に停止します。
randomOrder: をtrue で画像の表示順序をランダムにします。

Caption

Captionでキャプションの表示を設定します。

showCaptions:をhover でマウスオーバー時にキャプションを表示、alweys で常時表示になります。never で非表示になります。その下の項目で透明度やフェードの時間が設定できます。

ダウンロード

Generatorでスライドショーの設定を行いロードのボタンをクリックすると、プレビュー画面の下にHTMLファイルに貼り付けるコードが生成されますので、コピーしてヘッダー内へ貼り付けるか、どこかにメモするかします。

横の、「GET RHINOSSLIDER 1.05」をクリックでGeneratorで作ったスライドショーのデモがダウンロードできます。必要なJSファイルやCSSファイルなどこのデモファイルに全て含まれています。

HTML

ヘッダー内でダウンロードしたJSファイルとCSSファイルを読み込みます。

<link type="text/css" rel="stylesheet" href="/css/rhinoslider.css">
<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/rhinoslider.js"></script>

続けてGeneratorで生成してもらったコードを以下の様に記入します。

<script type="text/javascript">
	$('#スライドショー要素を指定').rhinoslider({
		options: value
	});
</script>

スライドする画像はリスト形式でマークアップします。

<ul id="slider">
　　　<li><img src="img/slider/1.JPG" alt="" /></li>
　　　<li><img src="img/slider/2.JPG" alt="" /></li>
　　　<li><img src="img/slider/3.JPG" alt="" /></li>
　　　<li><img src="img/slider/4.JPG" alt="" /></li>
　　　<li><img src="img/slider/5.JPG" alt="" /></li>
</ul>

サンプルデモ

上記の流れでサンプルを作成しました。

サンプルデモ：Rhinoslider｜memocarilog demo

サンプルデモのHTMLは以下の通りです。

このサンプルで読み込んでるCSSファイルはRhinosliderよりダウンロードしたサンプルに入っていたCSSファイルをそのまま読み込んでいます。このCSSファイルはコントロールのスタイルの指定がされています。
スライドショー本体のスタイルはHTMLファイルにあるものだけです。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Rhinoslider 1.05</title>
	<link type="text/css" rel="stylesheet" href="rhinoslider.css" />
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
	<script type="text/javascript" src="js/rhinoslider-1.05.min.js"></script>
	<script type="text/javascript" src="js/mousewheel.js"></script>
	<script type="text/javascript" src="js/easing.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
			$('#slider').rhinoslider({
				effect: 'shuffle',
				showTime: 2000,
				autoPlay: true,
				showCaptions: 'hover'
			});
		});
	</script>
		<style type="text/css">
			body { background-color:#ddd; }
			#slider {　width:600px;
				height:450px}
			#slider li { list-style:none; }
			#container {　width:600px;
				margin:50px auto;}
		</style>
	</head>
	<body>
		<div id="container">
			<h1>Rhinoslider｜memocarilog demo</h1>
			<ul id="slider">
				<li><img src="img/slider/1.JPG" alt="" /></li>
				<li><img src="img/slider/2.JPG" alt="" /></li>
				<li><img src="img/slider/3.JPG" alt="" /></li>
				<li><img src="img/slider/4.JPG" alt="" /></li>
				<li><img src="img/slider/5.JPG" alt="" /></li>
			</ul>
		</div>
	</body>
</html>

iPhoneの標準アプリが消えてしまった場合に復活させる方法

透過pngにもそのままシャドウをかける事ができる filter: drop-shadow

memocarilog