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

準備

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

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

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

• Internet Explorer

  インターネットオプションの「セキュリティの設定」で， 「スクリプト」→「アクティブ　スクリプトを有効にする」

• Firefox

  メニューのツール→オプション→Web 機能の設定

使ってみる

まず，

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

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

1. ヘッダの jquery ... の行は次のように書き換える

   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.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 を開く