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

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

Rhinoslider: The most flexible jQuery slider/slideshow
Rhinoslider

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

ライセンスは MIT License です。
Rhinoslider: Dual licensed under the MIT or GPL Version 2 licenses

Generatorでコードの生成をする

Demo & Download」のページを開きます。
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ファイルなどこのデモファイルに全て含まれています。
「GET RHINOSSLIDER 1.05」をクリック

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>

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー jQueryプラグイン スライドショー トラブル コードサンプル コンテンツ Facebook 素材 php 引っ越し お知らせ JavaScript カテゴリー Shareボタン CSS IE 投稿タイプ レスポンシブ Photoshop seo Macアプリ サイドバー タクソノミー HTML5 WPセキュリティ Git カスタムメニュー ナビゲーション PHPリファレンス SVG API query_posts RSS WP使い方 iTunes データベース コメント function 条件分岐 get_posts() スマートフォン Sass/Compass moreタグ