ソフトウェア TIPS(1)

　　　　　 jQueryを使ってブラウザで見栄えのするスライドショウを作る

D3plug, CuBox
D3plug, CuBox
jQueryとtimerプラグイン、easingプラグインを組み合わせて、複数画像のスライドショウを作ってみましょう。これを利用すれば、サイネージのアプリケーションなどにも応用できます。
CuBox, CuBox-Pro, D3Plugで動作が確認できます。
 
 
 

1. jQueryのダウンロード

まず、準備としてjQueryと必要なプラグインをダウンロードしておきます。

(1)jQuery本体(jquery-1.10.1.min.js)を  http://jquery.com/download/ からダウンロードします。

(2)timerプラグイン(jquery.timer.js)をhttp://plugins.jquery.com/jquery-timer/からダウンロードします。

(3)easingプラグイン(jquery.easing.1.3.js)をhttp://plugins.jquery.com/jquery.easing/からダウンロードします。


2. 画像ファイルの準備

画像ファイルは全て幅と高さが同じものを作成します。

ここで説明するサンプルでは、幅500px、高さ375pxとしてあります。

(サンプルでは001.jpg～009.jpgの９つの画像を使います。)

3.コードの記述

実際にコードを書いていみましょう。

(1) HTML本体

index.htmlファイルを下のように記述します。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

   <title>Slideshow</title>

   <link rel="stylesheet" href="slideshow.css"/>

   <script src="js/jquery-1.10.1.min.js"></script>

   <script src="js/jquery.easing.1.3.js"></script>

   <script src="js/jquery.timer.js"></script>

  <script src="slideshowr.js"></script>

</head>

<body>

   <div id="window">   

   <ul id="slideshow">

   </ul>

   </div>    

</body>

</html>

至ってシンプルですが、簡単に説明をしておきます。

(i) id=”window”のdivがスライドショーを表示するフレームになります。画像ファイルと同じ大きさとします。幅と高さはjavascript内で指定します。それ以外のプロパティは、スタイルシートで指定します。

(ii)  id="slideshow"のulが画像リストになります。５行×２列になるようにjavascriptと、スタイルシートで指定します。

 

(2)スタイルシート

slideshow.cssファイルを下のように記述します。

 

*{margin:0; padding:0;}


body{background:#353637; height:100%;}


#window{

clear:both;

background:#131310;;

overflow:hidden;

position:relative;

margin:10px auto 10px auto;

}


#slideshow{

overflow:hidden;

position:relative;

}



#content img{float:left; padding:30px;}


#slideshow li{

float:left;

display:inline;

}

 

簡単に説明をしておきます。

(i) window, slideshowに関して

   ① overflow:hidden;  一画像分の大きさに入らない領域は隠すようにしておきます。

   ② position:relative;  通常の位置を基準とした相対的な配置を行います。

(ii) img, slideshow li に関して

   ① float:left; ボックスを左に配置して、後続の内容を右側に回り込ませます。

   ② display:inline; リスト項目を横並びで表示するようにします。

 

(3) Javascript

slideshowr.jsファイルを下のように記述します。

 

var imagefiles = ["0001.jpg", "0002.jpg", "0003.jpg", "0004.jpg", "0005.jpg", "0006.jpg", "0007.jpg", "0008.jpg", "0009.jpg"];

var iwidth = 500;    /* image幅 */

var iheight = 375;    /* inage高さ */

var col = 2;    /* 画像リスト・カラム数 */

var row =  Math.floor((imagefiles + 1) / col);    /* 画像リスト行数 */

var timeout = 5000;    /* 5秒ごとに切り替え */

var animation_duration = 2500;    /* 2.5秒間エフェトクト効果による表示切り替え */

var easing_mode = 'easeOutBack';

var easings = ["linear", "swing", "jswing", "easeInQuad", "easeOutQuad", "easeInOutQuad", "easeInCubic", "easeOutCubic", "easeInOutCubic", "easeInQuart", "easeOutQuart", "easeInOutQuart", "easeInQuint", "easeOutQuint", "easeInOutQuint", "easeInSine", "easeOutSine", "easeInOutSine", "easeInExpo", "easeOutExpo", "easeInOutExpo", "easeInCirc", "easeOutCirc", "easeInOutCirc", "easeInElastic", "easeOutElastic", "easeInOutElastic", "easeInBack", "easeOutBack", "easeInOutBack", "easeInBounce", "easeOutBounce", "easeInOutBounce"];


/** 画像をセットする */

function setHtmlStrings(elemid, sentence) {

   $(elemid).empty();

   $(elemid).html(sentence);

}


/* ウィンドウ・画像初期化 */

function initImageList() {

   var wpx = iwidth + 'px';

   var hpx = iheight + 'px';


   var htmlstr = '';

   var i = 0;

   for(i = 0; i < imagefiles.length; i++) {

   htmlstr = htmlstr + '<li class="imagebox"><img src="images/' + imagefiles[i] + '" alt="image ' + i + '"/></li>';

   }

   setHtmlStrings("#slideshow", htmlstr);


   $("#window").css("width", wpx);

   $("#window").css("height", hpx);

   $(".imagebox").css("width", wpx);

   $(".imagebox").css("height", hpx);


   wpx = (iwidth * col) + 'px';

   hpx = (iheight * row) + 'px';

   $("#slideshow").css("width", wpx);

   $("#slideshow").css("height", hpx);

}


$(document).ready(function(){

   var i = 0;

   var currentimageid = 0;

   var leftpos = 0;

   var k = 0;

   initImageList();


   $.timer(timeout, function (timer) {

  

   if(leftpos == 0) leftpos = -iwidth;

   else leftpos = 0;

   var j = Math.floor((i + 1) / 2);

   if(i == (imagefiles.length - 1)) {

   toppos = 0;

   leftpos = 0;

   }

   else toppos = -iheight * j;

  

   var leftpx = leftpos + 'px';

   var toppx = toppos + 'px';


   easing_mode = easings[k];


   $("#slideshow").stop().animate({left: leftpx, top: toppx}, {easing: easing_mode, duration: animation_duration});


   i++;

   if(i == imagefiles.length) i = 0;

  

   k++;

   if(k == easings.length) k = 0;

   });


});

簡単に説明をしておきます。

(i)  initImageList() 関数

    ９つの画像ファイルのリストを生成して、 id="slideshow"のul内に５行×２列になるようにプロパティをセットします。

(ii) $(document).ready()関数

    ９つの画像ファイルを5秒ごとに切り替えて表示します。画像の移動はjQueryのanimate()関数で実現しています。移動時のエフェクトはeasingプラグインの機能を使用しています。

 
4. Sampleファイルの配置
 
下の jQuerySlideSmaple.zip をダウンロードして、解凍した全てのファイルをターゲットマシンの同一のフォルダ下におき、index.html をChromium(Chrome ブラウザ)で開いてください。UBUNTUにデフォルトで組込まれているFireFoxの場合、動作が遅い場合があります。参考のために実行時の動画を用意してあります。ダウンロードしてPCでその様子を確認することができます。
 
実行動画； jQuerySlideSmaple/out.ogv
ダウンロード
jQuerySlideSmaple
zipファイルになっています。解凍してご利用ください
jQuerySlideSmaple.zip
zip ( 圧縮 ) ファイル 546.0 KB
ダウンロード
ダウンロード
実行動画
９つの画像ファイルを5秒ごとに切り替えて表示します
out.ogv.ogg
オーディオファイル 27.6 MB
ダウンロード
コメント: 0