memocarilog

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

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

Galleriffic配布先

Galleriffic

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

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

使い方

head内またはbodyタグ直前でjQuery本体とgalleriffic.js、opacityrollover.jsを読み込みます。

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="/js/jquery.galleriffic.js"></script>
<script src="/js/jquery.opacityrollover.js"></script>

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

<script type="text/javascript">
jQuery(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: '&amp;amp;amp;amp;lsaquo; 前の画像', // コントローラーの前の画像へのテキスト変更
	nextLinkText: '次の画像 &amp;amp;amp;amp;rsaquo;', // コントローラーの次の画像へのテキスト変更
	nextPageLinkText: 'Next &amp;amp;amp;amp;rsaquo;',　// コントローラーの次ページへのテキスト変更
	prevPageLinkText: '&amp;amp;amp;amp;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 id="nav" class="controls"></div>
	<!-- ↑コントロラー（次へ前へボタンなど）表示部分 -- >
	<div class="slideshow-container">
	<!-- ↑スライドショー画像表示部分 -->
	<div id="loading" class="loader"></div>
	<!-- ↑ローディング表示部分 -->
	<div id="slideshow" class="slideshow"></div>
	<!-- ↑スライドショー画像表示部分 -->
</div>
<div id="caption" class="caption-container"></div>
<!-- ↑キャプション部分 キャプション付けたい時記入する -->
</div>
<!-- スライドショー部分ここまで -->

<!-- サムネイル部分ここから -->
<div id="thumbs" class="navigation">
<ul class="thumbs noscript">
	<li>
	<a class="thumb" name="leaf" href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">
	<img src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015_s.jpg" alt="Title #0" />
	</a>
	<div class="caption">Description</div>
	</li>
	.
	.（略）
	.
</ul>
</div>
<!-- サムネイル部分ここまで -->

<h4>!追記 2014/12/06</h4>
<p>CSS についてコメント頂きました。「<a href="#li_comment-16365">コメント中のコード</a>」も合わせてご確認下さい。<br>コメント中のコードを指定しないと、実装に不具合がでる可能性があるようです。</p>

<h3 id="sampledemo">作ってみたサンプルデモ</h3>
<p>汎用性がありそうなExample2を使ってみました。<br>"<a href="https://memocarilog.info/memocarilog-demo/galleriffic-demo/">Galleriffic demo| memocarilog</a>"</p>

<h5>サンプルデモのhtml</h5>

<div class="content">
        <div id="gallery" class="content">
					<div id="controls" class="controls"></div>
					<div id="nav" class="controls"></div>
					<div class="slideshow-container">
						<div id="loading" class="loader"></div>
						<div id="slideshow" class="slideshow"></div>
					</div>
					<div id="caption" class="caption-container"></div>
				</div>

        <div id="thumbs" class="navigation">
        <ul class="thumbs noscript">
          <li>
            <a class="thumb" href="images/p01.jpg"><img src="images/s/p01.jpg" alt=""></a>
          </li>
          <li>
            <a class="thumb" href="images/p02.jpg"><img src="images/s/p02.jpg" alt=""></a>
          </li>
          <li>
            <a class="thumb" href="images/p03.jpg"><img src="images/s/p03.jpg" alt=""></a>
          </li>
          <li>
            <a class="thumb" href="images/p04.jpg"><img src="images/s/p04.jpg" alt=""></a>
          </li>
          <li>
            <a class="thumb" href="images/p05.jpg"><img src="images/s/p05.jpg" alt=""></a>
          </li>
          <li>
            <a class="thumb" href="images/p06.jpg"><img src="images/s/p06.jpg" alt=""></a>
          </li>
        </ul>
        </div>
      </div>

サンプルデモのjs