Categorys

Tags

CSS3 ダッシュボード jQueryプラグイン ヘッダー 素材 Macアプリ コンテンツ スライドショー Facebook コードサンプル トラブル php seo CSS Shareボタン 引っ越し カテゴリー お知らせ 投稿タイプ Photoshop WP使い方 JavaScript mac使い方 Parallels データベース API サイドバー IE ナビゲーション レスポンシブ WPセキュリティ タクソノミー HTML5 query_posts iTunes iPhoneアプリ レビュー RSS スマートフォン get_posts() 条件分岐 function back-to-top フリーソフト コメント

サムネイル付スライドショーギャラリー jQueryプラグイン-Galleriffic

サムネイルが付いた画像スライドショーのjQueryプラグインです。サムネイルがフォーカスされた時に大きい画像を読み込む為、画像が大量にあっても読み込みに時間がかかりません。

オプションも豊富で、ページャー、画像タイトルやキャプションを同時に表示させることもできます。 スライドショーのオンオフやページ送りをつけることも可能です。

***2013/05/15***
思いの他継続的に検索して頂いているにもかかわらず、サンプルがひどく適当で記事内容がわかりにくかったので、サンプルを作りなおして記事にも手を加えました。以前よりは分かりやすくなったと思います…。

Galleriffic配布先

Galleriffic
jQueryプラグイン-Galleriffic

opacityrolloverが同包されておりサムネイル画像がフェードされるようになっています。
配布先の●Examplesのところよりサンプルが一式もダウンロードできます。

サンプルデモ“も作りました。

使い方

head内でjQuery本体とgalleriffic.js、opacityrollover.jsを読み込みます。

<script type="text/javascript" src="js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="js/jquery.galleriffic.js"></script>
<script type="text/javascript" src="js/jquery.opacityrollover.js"></script>

続けて以下のようにopacityrollover.jsとgalleriffic.jsの呼び出しとオプション設定を指定します。

<script>
	$(document).ready(function() {
				
	// opacityrollover のオプション設定				
	var onMouseOutOpacity = 0.67;  // マウスアウト時の透明度
	$('#thumbs ul.thumbs li').opacityrollover({
		mouseOutOpacity:   onMouseOutOpacity,
		mouseOverOpacity:  1.0, // マウスオーバー時の透明度
		fadeSpeed:         'fast', // フェードの速さ
		exemptionSelector: '.selected' // 現在選択中の要素のクラス
	});
				
	// Galleriffic のオプション設定
	var gallery = $('#thumbs').galleriffic({
	delay: 5000, // 画像が切り替わる時間
	numThumbs: 10, // 1画面に表示させるサムネイルの数
	preloadAhead: 10, // プリロードする画像数
	enableTopPager: false, // サムネイルの上部のページャーを出す/出さない
	enableBottomPager: true, // サムネイルの下部のページャーを出す/出さない
	maxPagesToShow: 5, // ページの最大値
	imageContainerSel: '#slideshow', // スライドショー画像部分のid名
	controlsContainerSel: '#controls', // コントロール部分のid名
	captionContainerSel: '#caption', // キャプション部分のid名
	loadingContainerSel: '#loading', // ローディング部分のid名
	renderSSControls: true, // trueでスライドショー画像の上部にスライドショーのオンオフボタン表示
	renderNavControls: true, // trueでスライドショー画像の上部に画像送り戻しのボタン表示
	playLinkText: 'Slideshowを再生する', // コントローラーのplayのテキスト変更
	pauseLinkText: 'Slideshowを停止する', // コントローラーのPauseのテキスト変更
	prevLinkText: '&lsaquo; 前の画像', // コントローラーの前の画像へのテキスト変更
	nextLinkText: '次の画像 &rsaquo;', // コントローラーの次の画像へのテキスト変更
	nextPageLinkText: 'Next &rsaquo;', // コントローラーの次ページへのテキスト変更
	prevPageLinkText: '&lsaquo; 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>

HTMLは以下のようにスライドショー部分と、サムネイル部分を記述します。
スライドショー部分のコントローラーなどが必要なければ、なしでも大丈夫です。
画像はサムネイルとスライドショーサイズと2種類用意します。

<!-- スライドショー部分 -->
<div id="gallery" class="content">
	<div id="controls" class="controls"></div>
	<!-- ↑コントロラー(次へ前へボタンなど)表示部分 -->
	
	<div class="slideshow-container">
		<div id="loading" class="loader"></div>
		<!-- ↑ローディング表示部分 -->
		<div id="slideshow" class="slideshow"></div>
		<!-- ↑スライドショー画像表示部分 -->
	</div><!-- fin_slideshow-container -->
	
	<div id="caption" class="caption-container"></div>
	<!-- ↑キャプション部分 キャプション付けたい時記入する -->
</div>
<!-- スライドショー部分ここまで -->		

<!-- サムネイル部分ここから -->
<div id="thumbs" class="navigation">
	<ul class="thumbs noscript">
		<li>
		<a class="thumb" href="images/1.jpg"><img src="images/small/s1.jpg" alt="" /></a>
		</li>
		<li>
		<a class="thumb" href="images/2.jpg"><img src="images/small/s2.jpg" alt="" /></a>
		</li>
			:
		(略)
			:
	</ul>
</div>
<!-- サムネイル部分ここまで -->

作ってみたサンプルデモ

汎用性がありそうなExample2を使ってみました。
Galleriffic demo| memocarilog

(以下は旧サンプル)
使ってみたdemo

Related Article

35 Comments & Tracbacks

  • よこ 2013-05-14 12:22 PM

    始めまして、この記事を参考にGallerifficを設置してみました。一つ質問なのですが、デモのように表示画像のサイズを変えたいのですが、画像サイズを変えるとサムネイルと重なるように表示されてしまいます。
    例えば600×400の横型画像があり、その下にサムネイルが並ぶようにするにはどうすればいいのでしょうか?

    Reply

    • saori 2013-05-14 9:06 PM

      よこ さま

      初めまして。ソースコードを拝見していないのでなんとも言えませんが、おそらくCSSの問題ではないでしょうか…。
      サムネイルが橫並びだと↓のデモが近いでしょうか。
      http://www.twospy.com/galleriffic/example-5.html
      ダウンロードできるファイルにはこのデモのファイルも含まれているので、そちらを確認頂くとわかりやすいと思います。

      Reply

  • テル 2013-08-04 2:01 PM

    はじめまして。
    質問なのですが、サムネイルを1列のみで表示したいのですが、どうすればいいのでしょうか。

    Reply

    • saori 2013-08-04 8:36 PM

      テル さま
      はじめまして。
      ul.thumbs li の float をなしにすればサムネイルを縦一列にできると思います。橫一列にされるなら親ボックスの長さを変更するとよい思います。

      Reply

  • マンサム 2013-08-09 6:24 PM

    初めまして。
    質問なのですが、サイドにサムネイルが設置されていますが、表示画像の下部に表示することは可能でしょうか??

    Reply

    • saori 2013-08-10 9:35 AM

      マンサム さま
      初めまして。サムネイル部分の div#thumbs をスライドショー部分の下にCSSで配置すれば大丈夫だと思います。
      よろしくお願いします。

      Reply

  • tomi 2013-09-05 2:53 PM

    はじめまして、初心者ですがご質問させて頂きます。
    記事を参考に設置させて頂きましたがサムネイルは表示されるのですが、サムネイルをクリックしてもイメージが表示させません。

    どうぞ宜しくお願いいたします。

    Reply

  • tomi 2013-09-05 3:02 PM

    何度も申し訳ありません。

    先ほどの質問はクリアできましたが、デモページのようには表示されません。
    CSSなどあるのでしょうか?

    ちなみに私はHTML4.01です。
    お願いいたします。

    Reply

    • saori 2013-09-05 9:00 PM

      tomi さま

      初めまして。
      galleriffic のサンプルをダウンロードするとCSSフォルダの中に、サンプルで使われているCSSファイルがいろいろはいっているかと思います。( http://www.twospy.com/galleriffic/ )ご希望されているレイアウトに近いCSSファイルを読み込んでそこからカスタマイズしていくとやりやすいと思います。
      私が作ったデモのCSSは以下のアドレスから確認できます(きれいなコードではありませんが…)。
      http://memocarilog.info/memocarilog-demo/galleriffic-demo/css/style.css

      Reply

  • 君島 2013-10-15 2:49 PM

    初めまして、この記事を参考にGallerifficを設置してみました。とても分かりやすく、Galleriffic自体は正常に設置することができたのですが、一つ質問があります。サムネイルをカテゴリー分けして表示することは可能なのでしょうか?
    例えばCreating a “Filterable” Portfolio with jQueryの機能をサムネイル部のみに適用するような方法を探しています。可能であれば教えて頂きたいです。よろしくお願い致します。

    Reply

    • saori 2013-10-16 10:26 AM

      君島 さま

      初めまして。コメントありがとうございます。
      ご質問の件ですが、オプションとしては並び替え機能は用意されていないようなので、独自でコードを書くか、”Creating a “Filterable” Portfolio”のコードに手を加えてギャラリー機能を加えるか(少しみただけですが、こちらは並び替えしているのではなくカテゴリ以外の画像は見えなくしているだけなので、なんだか難しそうですね…)という感じでしょうか…。

      私は使ったことがないのですが、以下のプラグインならソート機能もあるギャラリーが作れるようです。
      http://www.digicrafts.com.hk/components/JSThumbnailGallery

      探せば他にもソート機能つきプラグインがあるかも知れないので、他のものを使うというのも手かもしれませんね。

      Reply

  • 亜紀 2014-03-29 3:29 PM

    とても素晴らしいものだったのでお借りします。

    質問なのですが、スライドショーを再生するボタンを記号か画像を使用することはできませんか?
    そしてカーソルを合わせたときにタイトルが出ないように出来ませんでしょうか?

    特殊記号で▶を使おうと思ったのですが、カーソルを合わせるとタイトルで& #9654;(&の空白はわざとです)とでてしまうので困っています。

    宜しくお願いします。

    Reply

  • 亜紀 2014-03-29 3:29 PM

    とても素晴らしいものだったのでお借りします。

    質問なのですが、スライドショーを再生するボタンを記号か画像を使用することはできませんか?
    そしてカーソルを合わせたときにタイトルが出ないように出来ませんでしょうか?

    特殊記号で▶を使おうと思ったのですが、カーソルを合わせるとタイトルで& #9654;(&の空白はわざとです)とでてしまうので困っています。

    教えて頂けませんでしょうか?

    Reply

    • saori 2014-03-30 2:05 PM

      亜紀 さま

      ご質問の件の返答です。よろしくお願いします。

      > スライドショーを再生するボタンを記号か画像を使用することはできませんか?

      playLinkText オプションが用意されていますので、以下のような箇所の ‘ ‘(シングルクォーテーション)内を表示したい画像タグまたは、記号を入力して頂ければ変更できるはずです。

      playLinkText: 'Slideshowを再生する',
      

      > そしてカーソルを合わせたときにタイトルが出ないように出来ませんでしょうか?

      alt属性かtitle属性が入っていると思いますので、その部分を削除してみて下さい。

      > 特殊記号で▶を使おうと思ったのですが、カーソルを合わせるとタイトルで& #9654;(&の空白はわざとです)とでてしまうので困っています。

      caption を設定した場合のことですか?caption 部分はエンティティ化して入力してもちゃんと表示されました。具体的な箇所を教えて頂けますか?

      Reply

    • saori 2014-03-30 4:02 PM

      亜紀 さま

      たびたびすみません。ご質問の意味がわかりました!すべて ”スライドショーを再生するボタン” についてのことですよね? playLinkText オプションに「▶」を入れてみたら、タイトル属性が自動で入り、エンティティ化されて表示されました。ここのタイトル属性は、jquery.galleriffic.js の 900行目

      .append('<div class="ss-controls"><a href="#play" class="play" title="'+this.playLinkText+'">'+this.playLinkText+'</a></div>');

      ↑の箇所の title の部分(以下の部分)を削除、

      title="'+this.playLinkText+'"

      同じく jquery.galleriffic.js の 388行目の以下の部分を削除すると、HTML上のタイトル属性も削除できます。

      .attr('title', this.playLinkText)

      よろしくお願いします。

      Reply

      • 亜紀 2014-03-31 2:38 PM

        saoriさま

        解答ありがとうございます!
        説明が足らず申し訳ありません…
        無事うまくいきました♪
        また分からないことがあれば質問させていただきます><

        ありがとうございました!

        Reply

        • 亜紀 2014-03-31 2:45 PM

          度々すみません…;
          先程のスライドショー再生ボタンのタイトルの件なのですが、最初にこのスライドショーのページを開いたときのみ再生ボタンのタイトルがでてしまいます…

          一度その再生ボタンを押すとそれ以降の停止ボタンと再生ボタンにタイトルは出なくなりました。

          最初だけタイトルがでてしまう現象をどうにかできませんでしょうか;?
          教えて頂いた通り、title=”‘+this.playLinkText+'”と.attr(‘title’, this.playLinkText)は消しています。

          宜しくお願いします;

          Reply

          • saori 2014-03-31 3:24 PM

            亜紀 さま

            こんにちは。停止ボタン側のタイトル属性も削除する必要があるみたいでした。よく考えればそうですね…。
            停止ボタン側のタイトル属性を削除するには、jquery.galleriffic.js の 403行目(以下の部分)を削除、

            .attr('title', this.pauseLinkText)

            同じく jquery.galleriffic.js の 897行目

            .append('<div class="ss-controls"><a href="#pause" class="pause" title="'+this.pauseLinkText+'" rel="nofollow">'+this.pauseLinkText+'</a></div>');

            ↑の箇所の title の部分(以下の部分)を削除してみて下さい。

            title="'+this.pauseLinkText+'"

            これでたぶん大丈夫ではないでしょうか??

  • 亜紀 2014-03-31 3:48 PM

    あわわ;すみません…ちゃんと保存できてなかっただけのようです;
    お騒がせいたしました><;

    Reply

    • saori 2014-03-31 3:50 PM

      そうですか(笑)出来ていたらとりあえずよかったです(^O^)

      Reply

      • 亜紀 2014-03-31 4:58 PM

        別の質問をしても宜しいでしょうか。
        縦の画像がある場合、自動で大きい画像の方を縦にしたりは出来ますでしょうか?

        横と縦の画像があるので、どうすればいいものか…;
        何度もきいてしまい申し訳ありません;

        Reply

        • saori 2014-03-31 8:51 PM

          亜紀 さま

          縦画像は自動的に縦方法に読み込んでくれたと思います。
          よろしくお願いします。

          Reply

          • 亜紀 2014-04-01 10:41 AM

            一応縦に表示はされるのですが、下が切れてしまいます。
            #main_containerにhtightを指定すると表示したのでこれは解決しました。
            しかし縦画像が中央に行ってくれません。(左詰めになる)

            div.slideshow imgを縦用にdiv.slideshow img.testを作り、positionとleftを削除し、margin-left: auto; margin-right: auto;をいれました。

            div.slideshow img {
            vertical-align: middle;
            border: 1px solid #ccc;
            position: absolute;
            left: 0;
            }

            div.slideshow img.test {
            vertical-align: middle;
            border: 1px solid #ccc;
            margin-left: auto;
            margin-right: auto;
            }

            これを縦のimgのところにclass指定して入れたのですがimgにclassが反応してくれません。
            中央にするにはどうすればよいでしょうか。

          • saori 2014-04-01 3:37 PM

            亜紀 さま

            HTMLファイルの画像タグにclassを振ってもたぶんスライドショー部分の画像には反映されないんじゃないかなと思います…。Gallerifficのこの→「Galleriffic | Thumbnail rollover effects and slideshow crossfades」サンプルだと縦でも中央揃えになっているのでこのサンプルのスタイルを参考にされてみてはいかがでしょうか。こちらのページの「Galleriffic | A jQuery plugin for rendering fast-performing photo galleries」のダウンロードのところで、ここで公開されているサンプルのファイルを一式ダウンロードできますよ。

  • 亜紀 2014-04-10 10:20 AM

    お返事遅れまして申し訳ありません;
    無事作成できました!!ありがとうございます^^
    何度も質問してしまい申し訳ありませんでした;
    そのたびに丁寧なご返答とても感謝しております!
    ほんとうにありがとうございました^^

    Reply

    • saori 2014-04-10 7:59 PM

      亜紀 さま

      いえいえ、お礼のコメントありがとうございます!お役に立てたならうれしいです( ^ω^ )設置できてよかったです。

      Reply

  • sukesan 2014-06-05 12:06 PM

    saori様

    ソース参考にさせていただきました!
    一点質問なのですが、ie7とie8では正常に表示されないようですが、jQueryのバージョンが対応していないのでしょうか?

    Reply

    • saori 2014-06-06 12:12 PM

      sukesan さま

      ご参考ありがとうございます。
      jQuery の最新バージョンで Galleriffic を使用した事がなく詳しくはわかりませんが、1.9 以上だと使えなくなっているメソッドなどがあるため 1.8 系のjQuery本体で使用されてみてはいかがでしょうか?古い jQuery 本体では IE6 以上で対応していたと思います。よろしくお願いします。

      Reply

  • hddx 2014-07-17 12:08 PM

    こちらのjqueryをサイトで使用したいと思っております。
    現在大きな画像をクリックすると、次、次と切り替わっていきますが、こちらの大きな画像のリンク先を設定・変更する方法はお分かりになりますでしょうか。
    例えば画像の詳細ページ等に遷移させるなど。

    以上、よろしくお願いいたします。

    Reply

    • saori 2014-07-17 11:11 PM

      hddx さま

      はじめまして。そういったカスタマイズを行ったことがないため思いついただけの回答になりますが…。
      data 属性などで飛ばしたいアドレスを img またはサムネイル部分に追加して、大きい画像部分の click イベントを data 属性で追加したアドレスへ移動させてみるコードと差し替えてみてはいかがでしょう?

      Reply

  • hddx 2014-07-18 3:52 PM

    saori様

    ご回答いただきありがとうございます。
    一度そういった方法で試してみます。

    Reply

Leave a Comment

Emailは公開されません。*は必須項目です。

*



次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>