Info kplace.plala.jpから移設しました

■目的
 jQueryを使用してスライドショーを作成します。
 使用するのはjQueryプラグインのCoin Sliderです。

■jQuery
 最近amazonなどのサイトで見かけるイメージのポップアップなどの機能はJavaScriptで実現できます。
 JavaScriptのライブラリであるjQueryならJavascriptを知らなくても簡単に記述が可能になります。
 またjQueryで書かれた多くの機能はプラグインとして公開されて更に容易にJavaScriptの使用が可能になりました。
  buttomjQueryのサイトはこちら

■Coin Slider
 jQueryのスライドショープラグインで実装はシンプルです。
 ナビゲーションボタンのサイズや色などのカスタマイズなどはCSSを変更します。
 Coin SlideShow
 buttomCoin Sliderのページはこちら
 buttomCoin Sliderのデモページはこちら

■プラグインのアップロード
 Coin Sliderのプラグインをダウンロード/解凍しWebサーバーにアップロードします。
  プラグイン:coin-slider.min.js  ..圧縮版
  CSS:coin-slider-styles.css

■カスタマイズ..coin-slider-styles.css
 今回ナビゲーションボタンの位置・サイズなどを変更します。
 .cs-buttons { font-size: 0px; padding: 0px; float: left; }
 .cs-buttons a { margin-left: 25px; height: 2px; width: 10px; float: left; border: 1px solid #B8C4CF; color: #B8C4CF;  text-indent: -1000px; }
 .cs-next { background-color: #eeeeee; color: #666666; padding: 0px 10px; }
■jQueryとプラグインの読込指定
 htmlページで必要なファイルの読込指定を行います。
  * 今回jQueryはGoogle Codeのページから直接読み込みます。
  <link rel="stylesheet" href="../jquery/coin-slider/coin-slider-styles.css" type="text/css">
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script type="text/javascript" src="../jquery/coin-slider/coin-slider.min.js"></script>
■スライド画像の指定
 スライドショーの埋め込み箇所にid='coin-slider'属性のdiv要素を追加します。
 div内にはスライドショーで使用する画像を指定します。
 <div id="coin-slider">
   <a href="/pc1/pc637.html" target="_blank"> <img src="../image2/slide001.jpg"></a>
   <a href="/pc1/pc596.html" target="_blank"> <img src="../image2/slide002.jpg"></a>
   <a href="/pc1/pc577.html" target="_blank"> <img src="../image2/slide003.png"></a>
   <a href="/pc1/pc570.html" target="_blank"> <img src="../image2/slide004.jpg"></a>
 </div>
■jQueryの実行
 スライドショー実行のスクリプトを追加します。
 今回はパネルサイズ700x120、ナビゲーションあり、切り替え間隔などを指定します。
 <script type="text/javascript">
  $(document).ready(function() {
   $('#coin-slider').coinslider({ width: 700, height: 120, navigation: true, delay: 7000 });
  });
 </script>
 なおCoin Sliderのオプションは以下です。
オプション デフォルト
内容
パネルサイズ
width: 565,
height: 290,
width of slider panel
height of slider panel
遷移ブロック
spw: 7,
sph: 5,
squares per width
squares per height
間隔
delay: 3000,
sDelay: 30,
delay between images in ms
delay beetwen squares in ms
不透明度
opacity: 0.7, opacity of title and navigation
タイトル
title Speed: 500, speed of title appereance in ms
遷移効果
effect: '', random, swirl, rain, straight
ナビボタン
navigation: true, prev next and buttons
画像リンク
links : true, show images as links
Mouse On 停止
hoverPause: true pause on hover
■カスタマイズサンプル
 適用後のトップページ画面です。
 スライド画面の数だけナビゲーションボタンが表示されます。
 cbreeze

■結果
 本Webサイトホームページの"私のお気に入り"に適用しました。
 他のプラグインと比較してインストールはシンプルでした。
 トランジェントの効果もデフォルトのままで「騒がしくなく」気に入りました。

  blog      MovableType