[JS]アニメーションで動作する画像ギャラリーの超軽量すぎるスクリプト -Rhinofader

Post on:2011年11月1日

実用的なオプションを備えた、フェードのアニメーションで切り替わる画像ギャラリーを実装するjQueryのプラグインを紹介します。

サイトのキャプチャ

Rhinofader

[ad#ad-2]

Rhinofaderのデモ

デモのキャプチャ

Rhinofaderの「Example」
画像は次々にフェードのアニメーションで自動で切り替わります。

デモのキャプチャ

操作方法は自動・手動の2つです。
左下のアイコンで再生・停止、左右の矢印アイコンで画像を前後に切り替えます。

Rhinofaderの実装

HTML

画像はリスト要素で実装します。

<ul id="slideshow">
    <li><img src="images/001.jpg" alt="" /></li>
    <li><img src="images/002.jpg" alt="" /></li>
    <li><img src="images/003.jpg" alt="" /></li>
    <li><img src="images/004.jpg" alt="" /></li>
    <li><img src="images/005.jpg" alt="" /></li>
</ul>

外部ファイル

「jquery.js」と当スクリプトを外部ファイルとして指定します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="js/rhinofader.min.js"></script>

外部ファイルの中身です。
gzipすると0.01KBと超軽量で、このままでも5KBありません。

/**
  * Rhinofader 1.0
  * http://rhinoslider.com/rhinofader/
  *
  * Copyright 2011, Sebastian Pontow, Rene Maas (http://renemaas.de/)
  * Dual licensed under the MIT or GPL Version 2 licenses.
  * http://rhinoslider.com/license/
  */
(function(a,b,c){var d=function(b,c){var d=jQuery.extend({},jQuery.fn.rhinofader.defaults,c),e={isPlaying:false,intervalAutoPlay:false,active:"",next:"",container:"",items:"",buttons:[],prefix:"rhino-"},f=a(b);d.controlsPrevNext=Boolean(d.controlsPrevNext);d.controlsPlayPause=Boolean(d.controlsPlayPause);d.pauseOnHover=Boolean(d.pauseOnHover);d.showTime=parseInt(d.showTime,10);d.effectTime=parseInt(d.effectTime,10);d.controlFadeTime=parseInt(d.controlFadeTime,10);f.data("slider:vars",e);f.wrap('<div class="'+e.prefix+'container">');e.container=f.parent("."+e.prefix+"container");e.isPlaying=d.autoPlay;var g="";if(d.controlsPrevNext){g='<span class="'+e.prefix+"prev "+e.prefix+'btn">zurück</span><span class="'+e.prefix+"next "+e.prefix+'btn">weiter</span>';e.container.append(g);e.buttons.prev=a("."+e.prefix+"prev",e.container);e.buttons.next=a("."+e.prefix+"next",e.container);e.buttons.prev.click(function(){m(f,d);if(d.autoPlay){k()}});e.buttons.next.click(function(){n(f,d);if(d.autoPlay){k()}})}if(d.controlsPlayPause){g=d.autoPlay?'<span class="'+e.prefix+"toggle "+e.prefix+"pause "+e.prefix+'btn">Pause</span>':'<span class="'+e.prefix+"toggle "+e.prefix+"play "+e.prefix+'btn">Abspielen</span>';e.container.append(g);e.buttons.play=a("."+e.prefix+"toggle",e.container);e.buttons.play.click(function(){if(e.isPlaying===false){l()}else{k()}})}a("."+e.prefix+"btn",e.container).css({position:"absolute",display:"block",cursor:"pointer"});e.items=f.children("li");e.items.first().addClass(e.prefix+"active");e.active=a("."+e.prefix+"active",f);e.items.css({margin:0,width:f.css("width"),height:f.css("height"),position:"absolute",top:0,left:0,zIndex:0,opacity:0,overflow:"hidden"});e.active.css({opacity:1,zIndex:1});var h=d.styles.split(",");for(i=0;i<h.length;i++){e.container.css(h&#91;i&#93;,f.css(h&#91;i&#93;))}e.container.css("position","relative");f.css({top:"auto",left:"auto",position:"relative"});if(d.autoPlay){e.intervalAutoPlay=setInterval(function(){n(f,d)},d.showTime)}else{e.intervalAutoPlay=false}if(d.pauseOnHover){f.mouseenter(function(){if(e.isPlaying){clearInterval(e.intervalAutoPlay);if(d.controlsPlayPause){e.buttons.play.removeClass(e.prefix+"pause").addClass(e.prefix+"play")}}}).mouseleave(function(){if(e.isPlaying){e.intervalAutoPlay=setInterval(function(){n(f,d)},d.showTime);if(d.controlsPlayPause){e.buttons.play.removeClass(e.prefix+"play").addClass(e.prefix+"pause")}}})}if(d.showControls==="hover"||d.showControls==="never"){var j=a("."+e.prefix+"btn",e.container);j.hide();if(d.showControls==="hover"){e.container.mouseenter(function(){j.stop(true,true).fadeIn(d.controlFadeTime)}).mouseleave(function(){j.delay(200).fadeOut(d.controlFadeTime)})}}var k=function(){var a=f.data("slider:vars");clearInterval(a.intervalAutoPlay);a.isPlaying=false;if(d.controlsPlayPause){a.buttons.play.removeClass(a.prefix+"pause").addClass(a.prefix+"play")}},l=function(){var a=f.data("slider:vars");a.intervalAutoPlay=setInterval(function(){n(f,d)},d.showTime);a.isPlaying=true;if(d.controlsPlayPause){a.buttons.play.removeClass(a.prefix+"play").addClass(a.prefix+"pause")}},m=function(b,c){var d=b.data("slider:vars");if(a("li:animated",d.container).length>0){return false}if(d.items.first().hasClass(d.prefix+"active")){d.next=d.items.last()}else{d.next=d.active.prev()}if(d.next.hasClass(d.prefix+"active")){return false}p(b,c)},n=function(b,c,d){var e=b.data("slider:vars");if(a("li:animated",e.container).length>0){return false}if(!d){if(e.items.last().hasClass(e.prefix+"active")){e.next=e.items.first()}else{e.next=e.active.next()}}else{e.next=d}if(e.next.hasClass(e.prefix+"active")){return false}p(b,c)},o=function(a,b){var c=a.data("slider:vars");c.next.addClass(c.prefix+"active").css({zIndex:1});c.active.css({zIndex:0}).removeClass(c.prefix+"active");c.active=c.next},p=function(a,b){var c=a.data("slider:vars");c.next.css({zIndex:2}).animate({opacity:1},b.effectTime,b.easing,function(){o(a,b)});c.active.animate({opacity:0},b.effectTime)}};jQuery.fn.rhinofader=function(b){return this.each(function(){var c=a(this);if(c.data("rhinofader")){return c.data("rhinofader")}var e=new d(this,b);c.data("rhinofader",e)})};jQuery.fn.rhinofader.defaults={controlsPrevNext:true,controlsPlayPause:true,pauseOnHover:true,autoPlay:false,showTime:3e3,effectTime:1e3,controlFadeTime:650,showControls:"hover",styles:"position,top,right,bottom,left,margin-top,margin-right,margin-bottom,margin-left,width,height"}})(jQuery,window)

[ad#ad-2]

JavaScript

リスト要素のid(#slideshow)を指定し、画像ギャラリーを実装します。

$('#slideshow').rhinofader();

スクリプトのオプション

オプションではさまざまな項目を設定できます。

showControls
コントローラーの表示
controlsPrevNext
矢印アイコンの表示
controlsPlayPause
再生とポーズの表示
autoPlay
自動再生の有無
pauseOnHover
ホバー中の動作
showTime
画像の表示時間
effectTime
フェードの持続時間

スクリプトのオプションを加えて指定する場合は、下記のようになります。

$('#slideshow').rhinofader({
    effectTime: 1000
});

sponsors

top of page

©2024 coliss