トップページ -> 実践知識 -> JavaScript による Web プログラミング -> 画像のスライドショー (Explosure を使用)
[サイトマップへ], [サイト内検索へ],

画像のスライドショー (Explosure を使用)

サイト構成 連絡先,業績など 実践知識 データの扱い コンピュータ 教材 サポートページ

この Web ページでは,

jQuery と Explosure を用いて, 画像表示を行っている.  スライドショウの機能もあります.


準備

Explosure は、次のサイトから入手.

http://plugins.jquery.com/project/Exposure

◆ JavaScript に関する Web ブラウザの設定


使ってみる

まず,

Explosure のサイトからデモプログラムを入手

デモプログラムの中の次のファイルとディレクトリを使う

  1. ヘッダの jquery ... の行は次のように書き換える
    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    

  2. スタイルシート demo1.css は次のようにしてみる
    .panel {
      float:left;
    }
    
    ul.exposureThumbs {
      background:#333;
      border:8px solid #333;
      border-right:none;
      padding:0;
      margin:0;
      list-style-type:none;
    }
    
    ul.exposureThumbs li {
      margin:0 0 12px 0;
      padding:0;
    }
    
    ul.exposureThumbs li img {
      cursor:pointer;
    }
    
    .exposureTarget {
      width:640px;
      height:480px;
      background-color:#333;
      background-position:center center;
      float:left;
      padding:0;
      margin:0;
      border:12px solid #333;
      position:relative;
    }
    
    .exposureWrapper img {
      cursor:pointer;
      position:absolute;
      top:0;
      left:0;
    }
    
    .exposureSlideshowControls a,
    .exposureControls span,
    .exposureControls a {
      font-size:20px;
      padding:8px;
      float:left;
    }
    
    
    .clear {
      clear:both;
    }
    

  3. Web ブラウザで demo1.html を開く