ウェブデザイナーのためのホームページ考察ブログ

WebデザイナーのためのWebページの考察を行うブログ。またはウェブページの作り方Tipsを語るブログ。

【jQuery】画像ギャラリーページの作成に便利なGallerifficプラグインを使ってみた話

f:id:Keiro:20140820234057j:plain

今作っているウェブサイトで画像ギャラリーのようなものが欲しかったので、
何かJavaScriptでいい感じのものが作れないか調べてみるといい感じのjQueryプラグインを発見!!

Galleriffic
Galleriffic | A jQuery plugin for rendering fast-performing photo galleries

↓まさにこれを作りたい!

Gallerifficのサンプル2
http://www.twospy.com/galleriffic/example-2.html

というわけで、サンプルを参考に組み込んでみました。


組み込みは無事に終了したのですが、いくつかつまづいた部分があるのでメモしておこうと思います。

まずは簡単な解説

ライブラリの読み込み

<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
↑このライブラリは読み込み必須

<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>
↑必須ではない。
これは選択していない画像のサムネイルを半透明にしたり、
マウスオーバーでサムネイルを半透明にしたりしたい人は必要。
なので今回は必要!

組み込まないといけないdiv

<div id="controls"></div>
↑操作系のパネル(なくてもいい)
<div id="loading"></div>
↑読み込み中の表示(あったほうがいい)
<div id="slideshow"></div>
↑表示領域(必須)
<div id="caption"></div>
↑表示する文字(なくてもいい)
<div id="thumbs">
・・・・
</div>
↑サムネリスト(必須)

問題1:サムネイル画像をクリックしてもslideshowが切り替わらない。
っつーか、aタグで囲んでいるから画像のリンクが開くんだけど!!!

A.noscriptクラスの適用が必須でした。
<div id="thumbs">
 <ul class="thumbs noscript"> ←noscriptが必須

問題2:非選択中のサムネイルを半透明にしたい!!

A.サンプル2のコードに以下のコードがあるので、それをそのままコピペしましょう。
var onMouseOutOpacity = 0.67;
$('#thumbs ul.thumbs li').opacityrollover({
  mouseOutOpacity: onMouseOutOpacity,
  mouseOverOpacity: 1.0,
  fadeSpeed: 'fast',
  exemptionSelector: '.selected'
});
※こいつを$(document).readyのfunctionにぶちこめばOK

問題3:非選択中のサムネイルでも、マウスオーバーで不透明にしたい!!

A.onSlideChangeプロパティを設定しましょう。
$('#thumbs').galleriffic({
 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);
 }
※こちらもサンプル2のコピペでOK

問題4:選択中のサムネイルにボーダーをつけるなど、特殊な表示をしたい!!

A.自動的にselectedというクラスが選択中のサムネイルには付加されるので、それを利用してcssで好きにしましょう。
#thumbs li.selected img{
 margin:-2px;
 border:#3C93D5 solid 2px;
}
※上記はボーダーをつける例です。
marginのマイナス値はボーダーによってずれた座標を戻す役割があります。

問題5:autoStartを使っているんだけど、サムネイルが1個しかない場合も無駄に切り替わろうとする!!

A.サムネイルの個数を調べてautoStartプロパティに設定する値を変更しましょう。
var thumb_count = $("#thumbs ul.thumbs li").length; //サムネイルの個数を取得

// Initialize Minimal Galleriffic Gallery
$('#thumbs').galleriffic({
  autoStart:(thumb_count > 1) //サムネイルが2個以上のとき自動再生を有効化

こんな感じで結構問題多かったですね・・・(笑)

とはいえ、無事にいい感じのものができてよかったです。

画像ギャラリー系のプラグインはこちらのサイトがまとまっていて便利だと思いました。
この上なく便利!すごい「jQuery」の小技まとめ32 | コムテブログ

よかったらこちらもチェックしてみてください。

jQueryデザインブック 仕事で絶対に使うプロのテクニック

jQueryデザインブック 仕事で絶対に使うプロのテクニック