浮かび上がるように変わるスライドショーの導入

WEBページに必要なスライドショーですが、今回は浮かび上がるように変わるスライドショーを導入いたしました。

今回も前回と同じくお世話になりましたallabouutデジタル様からを下記を参考にいたしました。

「複数の画像がふわっと切り替わるスライドショーを作る」表示時間や表示枚数など自由に変更できるので使いやすい「jQuery」です。

大元のソースは

「A Simple jQuery Slideshow」

で、英語ですが、詳しく説明してあります。

今回は以下のようなスライドショーの導入を行いました。

まずjQueryの準備をしましょう。

※お使いのサイトが既に「jQuery」を導入している場合は必要ありません＊ head部に下記を記入して「jQuery」が使えるようにします。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js">
</script>

＊このソースはjQuery配布サイトが提供しているCDN(＝共有ファイルを配信する仕組み)から、jQuery 1.9.1を直接読み込むソースです。

＊サイト内に組み込みたい場合は以下をダウンロードしてください。

jquery1.9.1min 続いてスライドショーの「JavaScriptソース」同じくhaed部に追記します。

<script type="text/javascript">
function slideSwitch() {
   var $active = $('#slideshow img.active');
   if ( $active.length == 0 ) $active = $('#slideshow img:last');
   var $next =  $active.next().length ? $active.next()
      : $('#slideshow img:first');
   $active.addClass('last-active');
   $next.css({opacity: 0.0})
      .addClass('active')
      .animate({opacity: 1.0}, 1000, function() {
           $active.removeClass('active last-active');
      });
}
$(function() {
   setInterval( "slideSwitch()", 2000 );
});
</script>

JavaScripの記入が終われば後はHTML内に必要な記述をしていきます。

上記の場合は

<div id="slideshow">
    <img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_19-150x84.jpg" alt="" class="active" />
    <img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_02-150x84.jpg" alt="" />
    <img src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_03-150x84.jpg" alt="" />
</div>

ですが説明すると

<div id="任意">
    <img src="任意" alt="" class="active" />
    <img src="任意" alt="" />
    <img src="任意" alt="" />
</div>

となり、任意というところの設定を変えてカスタマイズします。スライドの数も任意で増やす事が出来ます。
ただしここで肝心なのは最初の画像にだけclassをつける必要があるので気をつけましょう。
クラス名も本来は任意でいけますが、上記のJavaScripソースに合わせています。
さて、最後にCSSを記入します。

下記はこのページで使っているスタイルです。

<style type="text/css">
#slideshow {
   position: relative;
   width:  150px; /* 画像の横幅に合わせて記述 */
   height: 84px; /* 画像の高さに合わせて記述 */
}
#slideshow img {
   position: absolute;
   top: 0;
   left:0;
   z-index: 8;
   opacity: 0.0;
}
#slideshow img.active {
   z-index: 10;
   opacity: 1.0;
}
#slideshow img.last-active {
   z-index: 9;
}
</style>

解説しますと

#任意 {
   position: relative;
   width: 任意px; /* 画像の横幅に合わせて記述 */
   height: 任意px; /* 画像の高さに合わせて記述 */
}
#任意 img {
   position: absolute;
   top: 0;
   left:0;
   z-index: 任意;/*順番的に2*/
   opacity: 0.0;
}
#任意 img.active {
   z-index: 任意;/*順番的に1*/
   opacity: 1.0;
}
#任意 img.last-active {
   z-index: 任意;/*順番的に3*/
}

となります。

＊　注意すべき点はクラス名で「img.active」と「img.last-active」の二つのクラス名の「ドット」の前後にスペースを入れると認識しなくなるので気をつけましょう。

＊「img.active」　○ 「img .active」　× これを理解していれば「active」のクラス名も任意で変えることができます。もちろん任意で変更した部分はJavaScripソースも任意に変更しなければなりません。

<script type="text/javascript">
function slideSwitch() {
   var $active = $('#任意 img.active');
   if ( $active.length == 0 ) $active = $('#任意 img:last');
   var $next =  $active.next().length ? $active.next()
      : $('#任意 img:first');
   $active.addClass('last-active');
   $next.css({opacity: 0.0})
      .addClass('active')
      .animate({opacity: 1.0}, 1000, function() {
           $active.removeClass('active last-active');
      });
}
$(function() {
   setInterval( "slideSwitch()", 2000 );//ここで表示速度を変える２秒は2000
});
</script>

以上、浮き上がるように変化するスライドショーの導入でした。

追記2014.2.4 上記のスライドショーではPNGファイルの透過を使用した場合、待機中の画像が透けて見えて重なり合う欠点があり、 JPGファイルでのみ使えることが判明しました。

ですのでPNGファイル（透過）画像でも使える簡単ギャラリーを見つけたので、追記して紹介します。

簡単jQueryスライドショー

公開サイトは
クロスフェードするシンプルなスライドショー（自動再生）jQuery
上記サイトへ行けばかなり詳しく紹介されております。

とてもシンプルjQueryでPNG、JPGを問わず使えて、サイトのアクセントに使えると思います。

またリンク（aタグ）にも対応しているので、バナー広告にも使えます。

スライドショーや画像ギャラリーでは、クロスフェードがまだまだ主流なので覚えておいて損はしませんよね。

ちなみに下がサンプル動作

JPGを使っていますがPNGファイルによる透過の重なりによる不具合が無い事は実証しております。

まずはCSS

<style type="text/css">
#viewer {
margin: 0 0;
width: 150px;
height: 84px;
text-align: left;
overflow: hidden;
}

#viewer ul {
width: 150px;
height: 84px;
text-align: left;
overflow: hidden;
position: relative;
}

#viewer ul li {
top: 0;
left: 0;
width: 150px;
height: 84px;
display: none;
position: absolute;
}

</style>

位置を決める「relative」「absolute」と、ボックスのオーバーフロー「hidden」に気をつければ動くと思います。

続いてスクリプトです。

<script>
$(function(){
var $setElm = $('#viewer'),//クラスでもIDでも可能
fadeSpeed = 1000,//切り替わるスピード
switchDelay = 2000;//切り替わるまでのスピード
$setElm.each(function(){
var targetObj = $(this);
var findUl = targetObj.find('ul');
var findLi = targetObj.find('li');
var findLiFirst = targetObj.find('li:first');
findLi.css({display:'block',opacity:'0',zIndex:'60'});
findLiFirst.css({zIndex:'70'}).stop().animate({opacity:'1'},fadeSpeed);
setInterval(function(){
findUl.find('li:first-child').animate({opacity:'0'},fadeSpeed).next('li').css({zIndex:'70'}).animate({opacity:'1'},fadeSpeed).end().appendTo(findUl).css({zIndex:'60'});
},switchDelay);
});
});
</script>

素晴らしくシンプルなソースです。

スクリプトが作れる人が羨ましいですね。

上部の数値で切り替わるスピードが変わり、数値が大きくなれば時間が長くなります。またliタグのzIndexを変更する設定になっているので、他のjQueryと複合して使う場合は気をつけた方が良いかもしれません。

最後にHTML

<div id="viewer">
<ul>
<li><img alt="" height="100" width="150" src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_19-150x84.jpg" /></li>

<li><img alt="" height="100" width="150" src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_20-150x84.jpg" /></li>

<li><img alt="" height="100"  width="150"src="http://www.amagistudio.com/wp-content/uploads/2013/12/amai2013_21-150x84.jpg" /></li>
</ul>
</div>

公開サイトではクラスを使っていましたが、ここではIDを使っています。

サンプルを必要な方は下をダウンロードしてください。

以上、追記にて、簡単jQueryスライドショーでした。

天城スタジオ

Website Produce Office

Amagi Studio