天城スタジオ

ループスライダーギャラリーを導入しよう！

 

目次

○デモ1
○デモ2
○デモ3

 

ループスライダーは画像を右へ左へ動かすギャラリーとは少し違う動的なコンテンツです。

ギャラリーは同じ場所で画像が次々に入れ替わるのにたいして、ループはコンテンツエリア内を一枚から複数枚の画像を左右、あるいは上下に無限スライドさせる視的効果です。

 

 

導入するにあたり、ＣＳＳ３やJavaScript、jQueryを考えましたが、 ＣＳＳ３はブラウザに未対応が多いので却下、JavaScriptは、これもブラウザ依存が激しいので、結局はjQueryで対応することにしました。

目標は「ループする画像にサムネイルリンクとして、ギャラリーの画像を変化させることで、名づけて「ループスライダーギャラリー」です！！ これが実現すれば、かなり動的なコンテンツが実現できそうです。

 

ギャラリーを理解しよう！

まずはループ先となるサムネイル付のギャラリーを探していたのですが、とてもシンプルで良いjQueryサイトを見つけましたので紹介します。

jQueryでサムネイル付きスライドショーをシンプルに作成する方法

サンプルファイル（ZIP）やコードの解説など、他にも色々なjQueryを分かりやすく紹介しているサイトで、WEBクリエイターにはオススメのサイトです。

導入の仕方は上記のサイトで詳しく書いています。

 

サムネイル付スライドギャラリーデモ

 

上記のデモが解説されているスライドショーを元にカスタマイズした物です。

とても簡単にできました。 下記が今回カスタマイズしたHTMLです。

 

<div id="slideshow">
<div>
<div><a href="#1"><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_02.jpg" width="600" height="300" alt="" /></a></div>
<div><a href="#2"><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_03.jpg" width="600" height="300" alt="" /></a></div>
<div><a href="#3"><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_04.jpg" width="600" height="300" alt="" /></a></div>
<div><a href="#4"><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_05.jpg" width="600" height="300" alt="" /></a></div>
</div>

<ul>
<li><a href="javascript:void(0);"><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_02-150x84.jpg" width="150" height="84" alt="" /></a></li>
<li><a href="javascript:void(0);"><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_03-150x84.jpg" width="150" height="84" alt="" /></a></li>
<li><a href="javascript:void(0);"><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_04-150x84.jpg" width="150" height="84" alt="" /></a></li>
<li><a href="javascript:void(0);"><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_05-150x84.jpg" width="150" height="84" alt="" /></a></li>
</ul>
</div>

 

サムネイル付きで画像が自動で変化し、またサムネイルをクリックすると画像が替わるjQueryです。

深く掘り下げると「slideshow」という「ID」の付いた「DIV」タグエリアの中がギャラリー部で、下のサムネイル部を「ul」で連動させて、選んだサムネイルをクリックすると画像が映し出されるしくみになっています。

画像のサイズも変更が可能で、CSSも合わせてカスタマイズができます。もちろん画像を増やす事も可能でID名の変更で、これだけでも十分、サイトのトップに使える機能です。

次にCSSをについて。

 

/*念のためのリセットスタイル*/
<style type="text/css">
body, p, h1, h2, h3, h4, h5, ul, li {
margin: 0px;
padding: 0px;
}
img {
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
/*ここからからほぼコピペ*/
#slideshow {
margin: 0 auto;
width: 600px;
text-align: left;
}
#slideshow div {
width: 600px;
height: 300px;
overflow: hidden;
position: relative;
}
#slideshow div div {
top: 0;
left: 0;
position: absolute;
}
#slideshow ul {
width: 600px;
}
#slideshow ul li {
width: 150px;
float: left;
display: inline;
}
#slideshow .active {
filter:alpha(opacity=100)!important;
-moz-opacity: 1!important;
opacity: 1!important;
}

/* =======================================
ClearFixElements
======================================= */
#slideshow ul:after {
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
#slideshow ul {
display: inline-block;
overflow: hidden;
}
</style>

 

　画像の大きさに合わせて幅や高さをCSSで変更したり、また位置を変えるだけで様々な要望に答えられると思います。

紹介サイトでは４つのバリエーションのスライドショーが紹介されていました。

そして、これが参考サイトが公開しているソースです。

１行目はjQueryを動かす本体へのリンクが張られていますが、すでにjQueryを導入している方は必要ありません。

それでも動かない時は記載するか、サンプルJSファイル（ＺＩＰ）をダウンロードしてください。

jquery.minファイル

※2014年7月8日　追記※　

ループスライダー等のスクリプトが動かなくなった不具合について。

jQueryのバージョンアップに伴う不具合と判明いたしました。

 

詳しくはhttp://www.amagistudio.com/jquerycustom/

 

‎

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var setId = '#slideshow';//ここでID名を変更
var fadeTime = 1000;
var delayTime = 5000;//スライドが切り替わる時間:1000で一秒
$(setId + ' div div').each(function(i){
$(this).attr('id','view' + (i + 1).toString());
$(setId + ' div div').css({zIndex:'98',opacity:'0'});
$(setId + ' div div:first').css({zIndex:'99'}).stop().animate({opacity:'1'},fadeTime);
});
$(setId + ' ul li').click(function(){
clearInterval(setTimer);
var connectCont = $(setId + ' ul li').index(this);
var showCont = connectCont+1;
$(setId + ' div div#view' + (showCont)).siblings().stop().animate({opacity:'0'},fadeTime,function(){$(this).css({zIndex:'98'})});
$(setId + ' div div#view' + (showCont)).stop().animate({opacity:'1'},fadeTime,function(){$(this).css({zIndex:'99'})});
$(this).addClass('active');
$(this).siblings().removeClass('active');
timer();
});
$(setId + ' ul li:not(.active)').hover(function(){
$(this).stop().animate({opacity:'1'},200);//サムネイルhover時の透過度
},function(){
$(this).stop().animate({opacity:'0.5'},200);//サムネイルout時の透過度
});
$(setId + ' ul li').css({opacity:'0.5'});//サムネイルの初期透過度
$(setId + ' ul li:first').addClass('active');//liにactiveのクラスをつける
timer();
function timer() {
setTimer = setInterval(function(){
$('li.active').each(function(){
var listLengh = $(setId + ' ul li').length;
var listIndex = $(setId + ' ul li').index(this);
var listCount = listIndex+1;
if(listLengh == listCount){
$(setId + ' ul li:first').click()
} else {
$(this).next('li').click();
};
});
},delayTime);
};

    // hoverでスライド動作ストップ
    $(setId).mouseover(function(){
        clearInterval(setTimer);
    }).mousemove(function(){
        clearInterval(setTimer);
    }).mouseout(function(){
        timer();
    });
});
</script>

 

スクリプト部のコメントアウトに、気付いた点を補足しております。

また「hoverでスライド動作ストップ」は追記しております。

上記のスクリプトのソースは紹介サイトの下の赤丸からダウンロードすることができます。

 

 

ほとんど紹介サイト通りに行えば理想的な導入も可能だと思います。

このサイトのクリエイター様には脱帽します。 ありがとうございました。

 

ループスライダーを理解しよう！

 

目標はループするサムネイル付のギャラリーの導入ですので、次にループスライダーjQueryの導入を検討します。

たぶんwordpressには同時にできるプラグインがあると思いますが、wordpressでないWEBページでの方法として思いつきました。

もし「一挙にできるよ」というのをご存知の方は教えてください。 ループスライダーを探しただけでも沢山のjQueryがあることがわかりました。 ＣＳＳ３の互換性が向上すればＣＳＳ３で対応したかったのですが、まだまだ先のようです。

（２０１４年１月現在） というわけで、調べているとギャラリーと同じクリエイター様がループスライダーも開発していたので導入しようと試みました。

jQueryでループして画像などコンテンツ要素をスライドさせる無限ループスライダーの作成方法 動作確認してみると、どうやら上記のループスライダーはサムネイルリストからクローン（スクリプトコピー）を作り、それをループさせるシステムのようでした。

ただ画像をループさせる分には大変よかったのですが、なぜかクローン（ジャバスクリプトでコピー）したサムネイルにリンクが張れない現象が起きてしまい、他のjQueryで試してみることにしました。

そうしてたどり着いたのが下のサイトです。

 

無限に横方向にスクロールするjQueryプラグイン

このサイトもかなり親切に解説していて良いサイトでした。

サンプルフォルダ（ZIP）があるので、ダウンロードして使ってみてください。

ダウンロード先

使い方が詳しく書いてありますので、早速ここでリストをループさせてみましょう。

※2014年7月ワードプレス上での動作不具合が発覚。※

復旧までループの動きはコチラをご覧ください。

※7月8日不具合は復旧いたしました※

 

ループスライダーデモ

 

問題￥くループしています。

しかも左右への切り替えが自由で、オプションのクラスを変えるだけで、同じページに幾つもループコンテンツが使えてかなり便利なjQueryでした。

しかしながら、最初に調べたループスライダーと同じく、ループする画像のリストからクローン（スクリプトでコピー）することは同じで、クローンされた画像に対して無反応な現象が起きました。

 

八方ふさがりです。

たぶん探せば同時に行えるjQueryがあると思いますが、英語版であるとか、複雑すぎて扱えたとしても実装後に不具合が起きた場合、対処に困る危険があります。 システムエンジニアさんならば問題ないのですが、天城スタジオはWEBデザインが中心なのでシステムを使ったものが作れないのです。

 

考えた挙句、初めに戻りギャラリーを変えれば、複合動作が出来るかと他のjQueryを試しましたが残念ながら、クローンリストへの反応がどれもありませんでした。 少し「javascript」の勉強をしてみると、どうやらクローンされたリストの「a」タグについている「javascript:void(0);」がリンクをさせない命令を発動して、それ以降の動作が行われていないようでした。

 

そして、ここからが力技です！

ループしているサムネイルをクリックしてギャラリーを変えてみました！

※2014年07月ループスライダーJQがワードプレスで動かなくなる不具合が発生※

復旧するまではの間、 ループスラーダーギャラリーのサンプルはコチラをごらんください。

※7月8日不具合は復旧いたしました※

 

ループスライダーギャラリーデモ

 

<script type="text/javascript">
$(function(){
// スライドショー2つ目：ここからコピぺ
//関数に値をつけて区別しているようです
//例えばsetIdをsetId01のように01を付加ようです
//つまり01と付いた関数を02と変えれば別ギャラリーを作ることが出来るようです
var setId01 = '#slideshow02';//ＣＳＳのＩＤ名
var fadeTime01 = 1000;
var delayTime01 = 5000;
$(setId01 + ' div div').each(function(i){
$(this).attr('id','view01_' + (i + 1).toString());
$(setId01 + ' div div').css({zIndex:'98',opacity:'0'});
$(setId01 + ' div div:first').css({zIndex:'99'}).stop().animate({opacity:'1'},fadeTime01);
});
$(setId01 + ' ul li').click(function(){
clearInterval(setTimer01);
var connectCont01 = $(setId01 + ' ul li').index(this);//setIdをsetId01に変更
var showCont01 = connectCont01+1;
$(setId01 + ' div div#view01_' + (showCont01)).siblings().stop().animate({opacity:'0'},fadeTime01,function(){$(this).css({zIndex:'98'})});
$(setId01 + ' div div#view01_' + (showCont01)).stop().animate({opacity:'1'},fadeTime01,function(){$(this).css({zIndex:'99'})});
$(this).addClass('active');
$(this).siblings().removeClass('active');
timer01();
});
$(setId01 + ' ul li:not(.active)').hover(function(){
$(this).stop().animate({opacity:'1'},200);
},function(){
$(this).stop().animate({opacity:'0.5'},200);
});
$(setId01 + ' ul li').css({opacity:'0.5'});
$(setId01 + ' ul li:first').addClass('active');
timer01();
function timer01() {
setTimer01 = setInterval(function(){
$(setId01).find('li.active').each(function(){
var listLengh01 = $(setId01 + ' ul li').length;
var listIndex01 = $(setId01 + ' ul li').index(this);
var listCount01 = listIndex01+1;
if(listLengh01 == listCount01){
$(setId01 + ' ul li:first').click()
} else {
$(this).next('li').click();
};
});
},delayTime01);
};
// hoverでスライド動作ストップ
$(setId01).mouseover(function(){
clearInterval(setTimer01);
}).mousemove(function(){
clearInterval(setTimer01);
}).mouseout(function(){
timer01();
});
});
</script>

 

ＣＳＳも対応させましょう

 

<style type="text/css">
#slideshow02{
margin: 0 auto;
width: 600px;
text-align: left;
}
#slideshow02 div {
width: 600px;
height: 300px;
overflow: hidden;
position: relative;
}
#slideshow02 div div{
top: 0;
left: 0;
position: absolute;
}
#slideshow02 ul {
width: 600px;
}
#slideshow02 ul li {
width: 150px;
float: left;
display: inline;
}
#slideshow02 .active {
filter:alpha(opacity=100)!important;
-moz-opacity: 1!important;
opacity: 1!important;
}

/* =======================================
ClearFixElements
======================================= */
#slideshow02 ul:after{
content: ".";
height: 0;
clear: both;
display: block;
visibility: hidden;
}
#slideshow02 ul {
display: inline-block;
overflow: hidden;
}
</style>

 

ギャラリーについては同じ物を使っていますが、関数に値を与えた別にスクリプトを使っています。

どうやら「ＩＤ」を変えないと動作しないようなので、同時に関数に値を与えないといけないようです。

「一つのページに同じ複数のスライドショーを入れる」

詳しくは、ギャラリーで紹介したサイト「BlackFlag」様から複数入れる方法が紹介されていたので引用させていただきます。

 

「１ページにこのスライドショーを複数入れ込む場合ですが、もともとページ内の複数設置を想定していなかったので、強引なやり方になっていますが、スクリプト内の変数などすべてに「01」や「02」といった 切り分け用のナンバリングをすることで実現可能かと思っています。

（スクリプトはスライドショー2つ分記述するので長くなってしまいますが・・・）参考までにサンプルファイルを用意しましたので必要あれば下記URLよりダウンロードして中身をご確認ください。」

 

とても丁寧に教えてくれています。

 

下はサンプルファイルのアドレスです。 興味のある方はコピペしてダウンロードしてみてください。（直接リンクはしておりません）

http://black-flag.net/devel/jQuerySimpleImageSlideShow/jQuerySimpleImageSlideShow3DUAL.zip

 

ＣＳＳについては、ＩＤを変更しているので、これも別にＣＳＳを用意しなければなりません。

例えば

 

#slideshow02{
margin: 0 auto;
width: 600px;
text-align: left;
}

 

のように書き足します。 実際に同じスタイルで使用する場合は、

 

#slideshow, #slideshow02{
margin: 0 auto;
width: 600px;
text-align: left;
}

 

と、カンマで区切ると簡単ですね。

 

スクリプト部に注訳を入れて説明していますが、簡単に言えばＩＤに合わせて書き換える場所があるということです。

コピーして注訳部を変えると１ページに幾つでも作ることが可能です。 書き換えた後は、同じスクリプトファイルやスクリプト部に記載しても問題ありません。

また「BlackFlag」様のサイトでは、別ページへリンクさせる方法なども説明されていますので、よければご覧下さい。

 

さて何が力技かと言いますと、このページのソースを見ていただければ分かると思いますが、画像「img」を表示させている「div」と「li」をそれぞれコピーしてＨＴＭＬに２倍にして記載しているところです。

ＨＴＭＬは長くなりますが、ループの原理として「元の画像をクローンが追いかけて、本来ＨＴＭＬに存在しない画像をクローンが表示させ、本体が消えたところでリロードして無限ループさせているからです。

そこで動作可能な本体を２倍にすることで、クローン部が表示される前にリロードさせれば本体だけでループが可能というわけです。

もしサムネイル部にリンクを必要としない場合は、この「img」のＨＴＭＬへのコピーは必要としません。

また注意点はギャラリー部の「img」も２倍にコピーして対応しないという点です。

 

 

さてループスライダーの説明を致します。

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script>
/*
jQuery infiniteSlide Plugin
version: 1.1
Author: T.Morimoto
*/
(function($){
$.fn.infiniteslide = function(options) {
//上の名前を変えると複数のループスライダーを作れる
//例：infiniteslideをinfiniteslide01のように
//option
var settings = $.extend( {
'height': 400, //高さ
'speed': 30, //速さ
'direction' : 'left', //向き
'pauseonhover': true //マウスオーバーでストップ
}, options);
//開始時のフェードインとプリロード
var opening = function(obj){
var d = new $.Deferred;
var ul = obj.find('ul');
var li = obj.find('li');

//幅の総和を取得
i = 0;
obj.find('img').each(function(key,value){
$('<img />').attr('src',$(this).attr('src'));
i = i + parseInt($(this).width());
});
//CSS
obj.css({
overflow: 'hidden'
});
ul.css({
width: i*2 + 'px',//通常はここの値が２です。
height: settings.height + 'px',
position: 'relative',
overflow: 'hidden'
}).children('li').css({
display: 'inline',
float: 'left'
});

//順番にフェードイン
li.hide().each(function(key,value){
$(this).delay(key*200).fadeIn('slow',function(){
$(this).clone().css('display','inline').appendTo(ul);
});
});

d.resolve();
return d.promise();
}

var slide = function(obj){
var d = new $.Deferred;
var ul = obj.children('ul');

//leftかrightかで方向を変えてアニメーション
//ロード時のみ必要
if(settings.direction == 'right'){
ul.css('left',-1*ul.width()/2 + 'px');
}

var anim = function(){
if(settings.direction == 'left'){
ul.animate({
left: '-' + ul.width()/2 + 'px'
},ul.width()/2*settings.speed,'linear',function(){
ul.css('left',0);
anim();
});
} else if(settings.direction == 'right'){
ul.animate({
left: '0px'
},ul.width()/2*settings.speed,'linear',function(){
ul.css('left',-1*ul.width()/2 + 'px');
anim();
});
}

//マウスオーバーで停止
if(settings.pauseonhover){
ul.on('mouseenter',function(){
$(this).pause();
}).on('mouseleave',function(){
$(this).resume();
});
}
}

//すべての画像が読み込み終わってからアニメーションスタート（いらないかも・・・）
var delay = ul.children().size() * 210;
setTimeout(function(){anim();},delay);
return d.promise();
}
//処理の実行
return this.each(function() {
opening($(this)).then(slide($(this)));
});
};
})(jQuery);
/*
* Pause jQuery plugin v0.1
*
* Copyright 2010 by Tobia Conforto <tobia.conforto@gmail.com>
*
* Based on Pause-resume-animation jQuery plugin by Joe Weitzel
*
* This program is free software; you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the Free
* Software Foundation; either version 2 of the License, or(at your option)
* any later version.
*
* This program is distributed in the hope that it will be useful, but WITHOUT
* ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
* FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
* more details.
*
* You should have received a copy of the GNU General Public License along with
* this program; if not, write to the Free Software Foundation, Inc., 51
* Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
(function(){var e=jQuery,f="jQuery.pause",d=1,b=e.fn.animate,a={};function c(){return new Date().getTime()}e.fn.animate=function(k,h,j,i){var g=e.speed(h,j,i);g.complete=g.old;return this.each(function(){if(!this[f]){this[f]=d++}var l=e.extend({},g);b.apply(e(this),[k,e.extend({},l)]);a[this[f]]={run:true,prop:k,opt:l,start:c(),done:0}})};e.fn.pause=function(){return this.each(function(){if(!this[f]){this[f]=d++}var g=a[this[f]];if(g&&g.run){g.done+=c()-g.start;if(g.done>g.opt.duration){delete a[this[f]]}else{e(this).stop();g.run=false}}})};e.fn.resume=function(){return this.each(function(){if(!this[f]){this[f]=d++}var g=a[this[f]];if(g&&!g.run){g.opt.duration-=g.done;g.done=0;g.run=true;g.start=c();b.apply(e(this),[g.prop,e.extend({},g.opt)])}})}})();
</script>
<script>
$(function(){
$('.infiniteslide1').infiniteslide({//（）の中がクラス名
//もし関数を変えているなら同じにする
//例：.infiniteslideを.infiniteslide2のように
'height': 84, //高さ
'speed': 30, //速さ
'direction' : 'left', //向き
'pauseonhover': true //マウスオーバーでストップ「false」無視
});
});
</script>
<style type="text/css">
ul,li {
list-style: none;
margin: 0;
padding: 0;
}
.infiniteslide1 {/*ここがクラス名*/ 
width: 600px;
height:84px;
}
</style>
<br />
<div class="infiniteslide1">
<ul>
<li><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_02-150x84.jpg" width="150" height="84" alt="" /></li>
<li><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_03-150x84.jpg" width="150" height="84" alt="" /></li>
<li><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_04-150x84.jpg" width="150" height="84" alt="" /></li>
<li><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_05-150x84.jpg" width="150" height="84" alt="" />
</li>
</ul>
</div>

 

　ループスライダーjQueryのサンプルとして、スクリプトソースからHTMLとCSSをまとめて書き出していますので、「HTML」の「body」にコピペして動作確認してみてください。

 

補足までに、このページで作ったループスライダーギャラリーのＨＴＭＬソースはこうなりました。

綺麗なソースではないのでお見せしたくありませんが参考になればと思います。

 

<div id="slideshow02">
<div>
<div><a href="#1"><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_02.jpg" width="600" height="300" alt="" /></a></div>
<div><a href="#2"><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_03.jpg" width="600" height="300" alt="" /></a></div>
<div><a href="#3"><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_04.jpg" width="600" height="300" alt="" /></a></div>
<div><a href="#4"><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_05.jpg" width="600" height="300" alt="" /></a></div> 
<div><a href="#1"><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_02.jpg" width="600" height="300" alt="" /></a></div>
<div><a href="#2"><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_03.jpg" width="600" height="300" alt="" /></a></div>
<div><a href="#3"><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_04.jpg" width="600" height="300" alt="" /></a></div>
<div><a href="#4"><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_05.jpg" width="600" height="300" alt="" /></a></div>
</div>
<div class="infiniteslide2">
<ul>
<li><a href="javascript:void(0);"><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_02-150x84.jpg" width="150" height="84" alt="" /></a></li>
<li><a href="javascript:void(0);"><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_03-150x84.jpg" width="150" height="84" alt="" /></a></li>
<li><a href="javascript:void(0);"><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_04-150x84.jpg" width="150" height="84" alt="" /></a></li>
<li><a href="javascript:void(0);"><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_05-150x84.jpg" width="150" height="84" alt="" /></a></li>
<li><a href="javascript:void(0);"><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_02-150x84.jpg" width="150" height="84" alt="" /></a></li>
<li><a href="javascript:void(0);"><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_03-150x84.jpg" width="150" height="84" alt="" /></a></li>
<li><a href="javascript:void(0);"><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_04-150x84.jpg" width="150" height="84" alt="" /></a></li>
<li><a href="javascript:void(0);"><img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_05-150x84.jpg" width="150" height="84" alt="" /></a></li>
</ul>
</div>
</div> 
<br />
<!--slideshow-->
<br />

 

対応したループスライダー部のスクリプトとＣＳＳです。

違いはクラス名が違うところと、リストの幅を２倍にするスクリプトの値をを2から1にしているところです。

 

箇所はコメントアウトに「通常は２：ここを1にして、表示させないようにしている。」と書いています。

また下記のスクリプトからはPause jQuery plugin v0.1は上記で導入しているので割愛しています。

 

<script type="text/javascript">
/*
jQuery infiniteSlide Plugin
version: 1.1
Author: T.Morimoto
*/
(function($){
$.fn.infiniteslide = function(options) {
//option
var settings = $.extend( {
'height': 400, //高さ
'speed': 30, //速さ
'direction' : 'left', //向き
'pauseonhover': true //マウスオーバーでストップ
}, options);
//開始時のフェードインとプリロード
var opening = function(obj){
var d = new $.Deferred;
var ul = obj.find('ul');
var li = obj.find('li');

//幅の総和を取得
i = 0;
obj.find('img').each(function(key,value){
$('<img />').attr('src',$(this).attr('src'));
i = i + parseInt($(this).width());
});
//CSS
obj.css({
overflow: 'hidden'
});
ul.css({
width: i*1 + 'px',//通常は２：ここを1にして、表示させないようにしている。
height: settings.height + 'px',
position: 'relative',
overflow: 'hidden'
}).children('li').css({
display: 'inline',
float: 'left'
});

//順番にフェードイン
li.hide().each(function(key,value){
$(this).delay(key*200).fadeIn('slow',function(){
$(this).clone().css('display','inline').appendTo(ul);
});
});

d.resolve();
return d.promise();
}

var slide = function(obj){
var d = new $.Deferred;
var ul = obj.children('ul');

//leftかrightかで方向を変えてアニメーション
//ロード時のみ必要
if(settings.direction == 'right'){
ul.css('left',-1*ul.width()/2 + 'px');
}

var anim = function(){
if(settings.direction == 'left'){
ul.animate({
left: '-' + ul.width()/2 + 'px'
},ul.width()/2*settings.speed,'linear',function(){
ul.css('left',0);
anim();
});
} else if(settings.direction == 'right'){
ul.animate({
left: '0px'
},ul.width()/2*settings.speed,'linear',function(){
ul.css('left',-1*ul.width()/2 + 'px');
anim();
});
}

//マウスオーバーで停止
if(settings.pauseonhover){
ul.on('mouseenter',function(){
$(this).pause();
}).on('mouseleave',function(){
$(this).resume();
});
}
}

//すべての画像が読み込み終わってからアニメーションスタート（いらないかも・・・）
var delay = ul.children().size() * 210;
setTimeout(function(){anim();},delay);
return d.promise();
}
//処理の実行
return this.each(function() {
opening($(this)).then(slide($(this)));
});
};
})(jQuery);
</script>
<script type="text/javascript">
$(function(){
$('.infiniteslide2').infiniteslide({
'height': 84, //高さ
'speed': 20, //速さ
'direction' : 'left', //向き
'pauseonhover': true //マウスオーバーでストップ「false」無視
});
});
</script>

<style type="text/css">
#slideshow02 ul,li {
list-style: none;
margin: 0;
padding: 0;
}
#slideshow02 .infiniteslide2 {
width: 600px;
height: 90px;
}
/*ループスライダーはギャラリーの中にあるので、必ずギャラリーのＩＤもしくはクラスを前に入れる*/
</style>

 

どうでしょうか？ このサンプルで作った「ループスライダーギャラリー」は基本的な構造です。

ＣＳＳを使う事で見た目を変えれば様々なサイトで活用できるのではないのでしょうか？ なにより軽く理解しやすいスクリプトで、不具合に速対応できるところが魅力的です。

なにも分からないでjQueryを使っていると後でとんでもない事になってしまいますから。 現在のところ、ファイヤーフォックスとＩＥ10、スマフォでの動作確認はできております。

この視覚効果を実現する為にお世話になりました。

「http://black-flag.net/」様、

「http://wood-roots.com/」様には、心から感謝しております。

他にもループスライダーやサムネイル付ギャラリーを紹介した良い感じのサイトがあったので紹介しておきます。

ループスライダー

smoothDivScroll：複数のサムネイル画像を左右に自動スライドさせるjQuery

上記は海外ループスライダーを紹介しています。

サムネイル付ギャラリー

サムネイル付スライドショーギャラリー jQueryプラグイン-Galleriffic

 

上記も海外サイトのギャラリーを紹介しています。

双方ともに機能性が高いですが、なにぶん複雑でオプションを使いこなせませんでした。

エンジニアの方には良い参考になるかもしれません。

 

 

以上、ループスライダーギャラリーを導入しようでした。

 

追記
2015年10月8日

 

モバイル対応処理のため、動作確認はデモとしてリンク先に置きました。
またこのスクリプトは同時に使うと不具合が起きやすく、一つのページで同時に使うことはお勧めいたしましません。
ソースがわかり易いので、スクリプトの勉強に参考にしてください。