« wordpressでjQuery uiを利用してみる-その(3) | トップページ | divタグで囲われた内容をスライドさせてくれるスクリプト #jQuery »

2011年7月18日 (月)

サムネイル付きのスライドギャラリーを実装するjQueryプラグイン (1) #jQuery

多機能なギャラリーを実装するjQueryプラグイン「Galleriffic」の設置方法をご説明します。

デモページ(1)
デモページ(2)
今回の解説はデモページ(1)となります。

ダウンロード先よりサンプル付きのzipファイルをダウンロードします。

zipファイルを解凍したexample-2.htmlをセッティングしていきます。

今回使用するリソース
jquery-1.3.2.js
jquery.galleriffic.js
jquery.opacityrollover.js
basic.css
galleriffic-2.css

head要素への記入
<script language="javascript" type="text/javascript" src="フォルダ名/jquery-1.3.2.js"></script>
<script language="javascript" type="text/javascript" src="フォルダ名/jquery.galleriffic.js"></script>
<script language="javascript" type="text/javascript" src="フォルダ名/jquery.opacityrollover.js"></script>
<script type="text/javascript">
document.write('<style>.noscript { display: none; }</style>');
</script>
<link type="text/css" rel="stylesheet" href="フォルダ名/basic.css"/>
<link type="text/css" rel="stylesheet" href="フォルダ名/galleriffic-2.css"/>

フッターエリア(/bodyタグ直前)への記入
<script type="text/javascript">
jQuery(document).ready(function($) {
// We only want these styles applied when javascript is enabled
$('div.navigation').css({'width' : '300px', 'float' : 'left'});
$('div.content').css('display', 'block');

// Initially set opacity on thumbs and add
// additional styling for hover effect on thumbs
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
mouseOutOpacity:onMouseOutOpacity,
mouseOverOpacity:1.0,
fadeSpeed:'fast',
exemptionSelector:'.selected'
});

// Initialize Advanced Galleriffic Gallery
var gallery = $('#thumbs').galleriffic({
delay:2500,
numThumbs:12,
preloadAhead:10,
enableTopPager:true,
enableBottomPager:true,
maxPagesToShow:7,
imageContainerSel:'#slideshow',
controlsContainerSel:'#controls',
captionContainerSel:'#caption',
loadingContainerSel:'#loading',
renderSSControls:true,
renderNavControls:true,
playLinkText:'Play Slideshow',
pauseLinkText:'Pause Slideshow',
prevLinkText:'‹ Previous Photo',
nextLinkText:'Next Photo ›',
nextPageLinkText:'Next ›',
prevPageLinkText:'‹ Prev',
enableHistory:false,
autoStart:false,
syncTransitions:true,
defaultTransitionDuration: 900,
onSlideChange:function(prevIndex, nextIndex) {
// 'this' refers to the gallery, which is an extension of $('#thumbs')
this.find('ul.thumbs').children()
.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
.eq(nextIndex).fadeTo('fast', 1.0);
},
onPageTransitionOut: function(callback) {
this.fadeTo('fast', 0.0, callback);
},
onPageTransitionIn: function() {
this.fadeTo('fast', 1.0);
}
});
});
</script>

オプションの説明

オプション名解説
// additional styling for hover effect on thumbs より下にある項目
onMouseOutOpacity数値選択されていない画像の透明度を0~1.0の間で指定します。1.0が100%になります。
mouseOverOpacity数値マウスオーバーしたときの画像の透明度を0~1.0の間で指定します。1.0が100%になります。
fadeSpeed文字列マウスオーバーしたときの透明になる速度を決めます。fastで早く、slowで遅くなります。
// Initialize Advanced Galleriffic Gallery より下にある項目
delayミリ秒自動的にスライド(autoStartの項目で設定できます。)をonにしたときに次のスライドに移動する秒数を指定できます。
enableTopPager
enableBottomPager
真偽サムネイル部分の上下に付いているページャー(1、2等の数字ナビゲーション)を表示させるか指定します。trueで表示、falseで非表示となります。enableTopPagerが上部分、enableBottomPagerが下部分となります。
autoStart真偽自動的にスライドを開始するか設定します。trueで自動的に開始、falseで止まります。

|

« wordpressでjQuery uiを利用してみる-その(3) | トップページ | divタグで囲われた内容をスライドさせてくれるスクリプト #jQuery »

jQuery」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1378074/40860927

この記事へのトラックバック一覧です: サムネイル付きのスライドギャラリーを実装するjQueryプラグイン (1) #jQuery:

« wordpressでjQuery uiを利用してみる-その(3) | トップページ | divタグで囲われた内容をスライドさせてくれるスクリプト #jQuery »