こんにちわ。上西です。
今回は、サイトを作る上で欠かせないスライドショーを簡単に実装できるjQueryを2つ紹介します。
Coin Slider
Coin Sliderではスライドショーの表示方法を4種類から選択できます。
それぞれの表示方法のサンプルは以下になります。
サンプルページ
random
rain
swirl
straight
それでは、導入方法です。
ダウンロード
Coin Sliderはこちらのサイトからダウンロードできます。
使い方
ダウンロードしたファイルを配置し、headタグ内で以下のコードを記述してを読み込みます。
※パスは自分の環境によって変わります。
<link rel="stylesheet" type="text/css" href="css/coin-slider-styles.css> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js></script> <script type="text/javascript" src="js/coin-slider.js></script>
次にheadタグ内に以下のコードを記述します。
$(document).ready(function() {
$('#slide').coinslider({
width: 960, //画像の幅
height: 250, //画像の高さ
spw: 10, //画像切替時の横四角の数
sph: 8, //画像切替時の縦四角の数
effect: 'rain', //画像切替時のエフェクト（random, swirl, rain, straight）
});
});
2行目でCoin Sliderを適用するDivのIDを指定します。
widthで画像の幅(px)をheightで画像の高さ(px)を指定します。
spwで画像切替時の横四角の数を、sphで画像切替時の縦四角の数を指定します。
あまり大きな数を指定すると画像の切り替えにかなり時間がかかってしまいます。
spw×sphが100を超えないくらいがいいと思います。
effectで画像切替時のエフェクトを指定します。
次に表示部分の記述します。
<div id="slide">
<!-- 画像1 -->
<a href="画像1のリンク先URL" target="_blank">
<img src="画像1のURL">
</a>
<!-- 画像2 -->
<a href="画像2のリンク先URL" target="_blank">
<img src="画像2のURL">
<span>タイトル等</span>
</a>
・・・
</div>
画像にタイトル等の文字を表示させたい場合は9行目のようにspanタグ内に表示させたい文字を記述します。
以上でCoin Sliderの導入は完了です。
Camera
Cameraには様々なオプションがあり、スライドショーの設定を細かく指定できます。
サンプルページ
それでは、導入方法です。
ダウンロード
Cameraはこちらのサイトからダウンロードできます。
使い方
ダウンロードしたファイルを配置し、headタグ内で以下のコードを記述してを読み込みます。
※パスは自分の環境によって変わります。
<script type='text/javascript' src='../scripts/jquery.min.js'></script> <script type='text/javascript' src='../scripts/jquery.mobile.customized.min.js'></script> <script type='text/javascript' src='../scripts/jquery.easing.1.3.js'></script> <script type='text/javascript' src='../scripts/camera.min.js'></script>
次に以下のコードを記述します。
<script>
jQuery(function(){
jQuery('#camera').camera({
height: '250px',
lorder: 'bar',
pagination: true,
thumbnails: false,
time: 3000,
});
});
</script>
3行目でCameraを適用するDivのIDを指定します。
heightで画像の高さ(px)を指定します。
lorderでローディング時に表示する項目を指定します。
paginationで左下に画像を切り替えるボタンを表示するか指定します。
thumbnailsでサムネイル画像を表示するか指定します。
timeで画像切り替えまでの時間(ミリ秒)を指定します。
まだまだオプションを細かく設定できるのですが、多すぎるので省略します。
使用できるオプションはこちらのOptionで確認できます
コンテンツの表示部分は以下のような感じです。
<div class="camera_wrap camera_magenta_skin" id="camera">
<!-- 画像1 -->
<div data-thumb="" data-src="画像1のURL">
<div class="camera_caption fadeFromBottom">
画像1テキスト
</div>
</div>
<!-- 画像2 -->
<div data-thumb="" data-src="画像2のURL">
<div class="camera_caption fadeFromBottom">
画像2テキスト
</div>
</div>
・・・
</div>
以上でCameraの導入は完了です。
今回は2つのjQueryを紹介させて頂きました。
是非使ってみてください。
それではまた次回お会いしましょう。
