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

Coin Slider..jQuery

作成日: 2012/05/18
■目的
　ｊQueryを使用してスライドショーを作成します。
　使用するのは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