SolidRun AMD HAILO Marvell NXP
Renesas TexasInstruments
  • ホーム
  • アーティクル★
  • 製品情報
  • イベント情報
  • Petapico コラム
  • ダイレクトショップ
  • DL
  • 英徳社について
  • 問い合わせ

ソフトウェア 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の9つの画像を使います。)

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が画像リストになります。5行×2列になるように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() 関数

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

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

    9つの画像ファイルを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
ダウンロード

ダウンロード
実行動画
9つの画像ファイルを5秒ごとに切り替えて表示します
out.ogv.ogg
オーディオファイル 27.6 MB
ダウンロード

コメント: 0
  • HomeBridgeとSiriで irMagicianを使う
  • Deep Learning on CuBox-i
  • HummingBoard-GateとMikroBUS クリックボード
  • HummingBoardをクラウドサービスMyThingsにつなぐ
  • Android+ WiFi Mini PCI カード
  • HummingBoard + WiFi Mini PCI カード
  • セキュアな無制限ストレージ ownCloud を CuBox-iで動かす
  • Android Appプログラミング入門
  • CuBox-iで動く各種サーバー
  • DebianをmSataから起動する
  • HummingBoardのaudio jackをAndroidから使ってみる
  • オフィシャル版Android4.4(Kitkat)のroot取得の仕方
  • HummingBoardのI2Cに温度センサーをつなぎデータをグラフ表示する
  • CentOSの兄弟 RedSleeve Linuxでサーバーを作る
  • Cu-Box-i/HBにmjpg-streamerストリーミング配信を載せる
  • SoftEther VPNで外から irMagician を制御してエアコンをつける
  • CuBox-i Androidのroot取得とadbの使い方
  • HummingBoardのSPIでLCDパネルへの表示をする
  • 旧CuBoxのメンテナンス情報について
  • 小型赤外線リモコン irMagician をつなぐ
  • wiringXをインストールする
  • kali linuxでセキュリティスキャンマシンにする
  • Debianでmicro-home-serverを作る(1)
  • 電子工作キットとGPIOピンアサイン
  • ArchLinuxにLXDEデスクトップを載せる
  • CuBox-i/HummingBoardの簡単インストーラー Ignition が登場
  • HummingBoardでUbuntu12.04(Linaro)
  • CuBox-i にUbubtu14.04, LXDEをインストールする
  • SqueezeboxでPandoraを聴こう(2)
  • SqueezeBoxがWebインストーラーになって簡単になりました
  • SqueezeboxでRadikoを聴こう(1)
  • GeeXboXをプレインストールしたCuBox-i1を使いこなす
  • アプリケーションと機種依存関係
  • CuBox-iのKitKat でWiFiのUSBを使えるようにする
  • CuBox-i にタッチパネルをつなぐ(Android Kitkat)
  • CuBox-i にKitKat を載せてみる(ソースからのビルドに挑戦)
  • CuBox-i でUSBのWiFiアダプタを利用する
  • Cubox-i4のFedora20にKDEデスクトップを載せる
  • Cubox-i4をFedora20マシンにする
  • CuBox-iにBluetooth機器接続に成功
  • CuBox-i にOpenELECが登場
  • ZoneMinder までの下準備とインストール
  • Debian 7.0 WheezyをCubox-iにインストールする
  • CuBox-i用のカーネル作成について
  • CuBox-iにUbuntu12.04をインストールする
  • MuBox on CuBox-i インストール基礎入門編
  • mjpg-streamerでストリーミング配信
  • CuBox-i でメディアプレーヤーXbian を楽しむ
  • CuBox-iでSDカードの容量いっぱいにイメージを拡張するには
  • CuBox-i でミュージックサーバーvolumio を試してみる
  • ZoneMinder でできる監視カメラシステムとは
  • GeeXboxをTVのリモコンで操作してみる
  • CuBox-iでradikoを外部スピーカーに流す
  • 基本のシリアル通信環境を整えておく
  • CuBoxにWebカメラを接続してMotionを使おう
  • CuBoxをメディアサーバにする
  • Apache Webサーバ / MySQLデータベース・サーバ / PHP
  • jQueryを使ってスライドショウを作る
  • 今、注目の超小型コンピュータたち(5) CuBoxをメディアプレーヤーにして楽しむ
  • 基本のサーバーを構築してみる
  • 今、注目の超小型コンピュータたち(4) ミュージックサーバーを組んでみた
  • 今、注目の超小型コンピュータたち(3) ミュージックサーバーをt作ってみよう
  • 今、注目の超小型コンピュータたち(6) ミュージックサーバーVoyage MuBox を完成させる
  • プラグコンピュータで「プロの開発」を始めてみませんか(2)
  • プラグコンピュータで「プロの開発」を始めてみませんか(1)
  • スカイプカメラ GTCAMってなんだ?
  • ARMとRaspberry Pi
  • Marvellのプロセッサとプラグコンピュータ
  • 今、注目の超小型コンピュータたち(2) サイネージを作ってみよう
  • 今、注目の超小型コンピュータたち(1) XBMCを載せてみよう

お問合わせフォームはこちら

メールはpetapicoshop@petapico.bizまで

適格請求書発行事業者登録番号のお知らせ


英徳社ホームページはこちら


1 日本国内への配送に適用されます。その他の国についてはこちらをご参照ください
概要 | 利用規約 | 返金条件と返品取消申請書 | 配送/支払い条件 | プライバシーポリシー | サイトマップ
ログイン ログアウト | 編集
  • ホーム
    • ショップからのお得情報
    • CuBox-i Seriesの情報
    • MicroSDの作り方
    • HummingBoard Seriesの情報
    • HummingBoard Edge/Gateの情報
    • IntelSoliPCの情報
    • windows10 IOTの情報
    • ClearFogの情報
    • MacchiatoBinの情報
    • fromSolidRunWebsite
  • アーティクル★
  • 製品情報
  • イベント情報
  • Petapico コラム
    • KODI
    • Cobox-i
    • HummingBoard
    • ソフトウェアTips
    • 外付け
    • カメラ
  • ダイレクトショップ
    • ダイレクトショップ iMX SoC
      • CuBox-Mセット
      • iMX8M Plus
      • iMX8M Plus Mate
      • CuBox-i1 OpenELECWiFi model
      • HummingBoard Pulseセット
      • CuBox-i1 OpenELEC セット
    • WAI WAIセール
      • Sheeva
      • D3
      • SMILE Plug
      • 第1世代CuBox|CuBox-PRO
      • CuBox-i1 セット
    • ダイレクトショップ LX2K
      • LX2160Aファミリー
    • ダイレクトショップ Marvell SoC
      • CEx7 CN9132
      • ClearFog
      • ClearFog Base
      • ClearFog Pro
      • MacchiatoBin Double|Single Shot
      • ClearFog GT 8K
      • MACCHIATObin ClearCloud 8K
      • SolidSense スターターセット
    • ダイレクトショップ intel SoC
    • ダイレクトショップ eRemote
      • eRemote
      • eSensor
    • 12V AC アダプター(PSE対応)
    • CuBox-i1 GeeXboXセット
    • CuBox-i1 OpenELEC+plugin
    • HummingBoard-Gate i1セット
    • HummingBoard-i2eX セット
    • HummingBoard-i4pro セット
    • CuBox-i2 セット
    • CuBox-i2 WiFiセット
    • CuBox-i2eX セット
    • CuBox-i2eX WiFiセット
    • CuBox-i4 Pro セット
    • HummingBoard-i2 セット
    • HummingBoard-i1セット
    • Application microSD Card for CuBox-i
    • Android microSD Card for CuBox-i
    • SolidPC
    • SolidPC SSD 32G
  • DL
    • Media Exposure
  • 英徳社について
  • 問い合わせ
閉じる