jQuery・タッチデバイスでも滑らかなフェードで切り替えるキャプション付きギャラリーを作りました [IE8対応]

150805_001

デモを見る

不動産物件を紹介するサイトなどでは、サムネイルをクリックして画像を切り替えるギャラリーの需要が一定数ある。
幅広い世代が閲覧することを想定し、機能を絞って作成。

検証済みブラウザとOS

IE 8～　※一部CSSはIE8不可
Firefox
Google Chrome
Safari
Windows 7
OS X Yosemite
iOS 8
Android 4.1

このjQueryで出来ること、出来ないこと

出来ること

サムネイルをクリックで、メイン画像をフェードで滑らかに切り替え
各画像にリンクURLを指定する
メイン画像にキャプション（見出しとテキスト）を追加する
キャプション領域の高さは、テキスト量の成り行きで変化
サムネイル用画像は不要

出来ないこと

カルーセルスライダー
サムネイルのロールオーバー
インラインHTMLの表示
自動切り替え

タッチデバイスでも滑らかな理由: Julian Shapiro 氏の、 Velocity.js を利用。

要点とコード

メイン画像とサムネイルは同じ画像
サムネイルのリンクにメイン画像を指定する
サムネイルのアクティブ時の装飾は、CSSで調整
メイン部分には、position: absolute; と overflow: hidden; を指定して、領域以外を非表示にしている
挿入するURLを <b> で囲んでいるのは、b タグが「他に適当なテキストタグがないときに使える」ため
キャプションの見出しはサムネイルの title を、テキストはサムネイルの alt が反映される
キャプションの背景は rgba() のため、IE8で使えない

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.2.2/velocity.min.js"></script>
<script src="js/captionGallery.js"></script>

<article id="block-gallery">
<section id="inner-gallery">
<a href="" target="_blank"><img src="images/ph_001.jpg" width="800" height="500">
<div>
<h1></h1>
<p></p>
</div></a>
<!-- /#inner-gallery --></section>

<ul id="inner-gallery-thumb">
	<li><a href="images/ph_001.jpg"><img src="images/ph_001.jpg" width="100" title="後ろで大きな爆発音がした" alt="親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。"></a>
	<b>//www.yahoo.co.jp/</b></li>
	<li><a href="images/ph_002.jpg"><img src="images/ph_002.jpg" width="100" title="親譲りの無鉄砲で小供の時から損ばかりしている" alt="なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。"></a>
	<b>//www.youtube.com/</b></li>
	<li><a href="images/ph_003.jpg"><img src="images/ph_003.jpg" width="100" title="小学校に居る時分学校の二階から飛び降りて" alt="新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。"></a>
	<b>//developer.mozilla.org/ja/docs/Web/JavaScript</b></li>
	<li><a href="images/ph_004.jpg"><img src="images/ph_004.jpg" width="100" title="一週間ほど腰を抜かした事がある" alt="弱虫やーい。と囃したからである。"></a>
	<b>//teratail.com/</b></li>
	<li><a href="images/ph_005.jpg"><img src="images/ph_005.jpg" width="100" title="なぜそんな無闇をしたと聞く人があるかも知れぬ" alt="小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。"></a>
	<b>//dotinstall.com/</b></li>
	<li><a href="images/ph_006.jpg"><img src="images/ph_006.jpg" width="100" title="別段深い理由でもない" alt="つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。"></a>
	<b>//b.hatena.ne.jp/hotentry/it</b></li>
	<li><a href="images/ph_007.jpg"><img src="images/ph_007.jpg" width="100" title="Lorem ipsum dolor sit amet" alt="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."></a>
	<b>//oscarotero.com/jquery/</b></li>
	<li><a href="images/ph_008.jpg"><img src="images/ph_008.jpg" width="100" title="新築の二階から首を出していたら" alt="この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。"></a>
	<b>//www.nicovideo.jp/</b></li>
	<li><a href="images/ph_009.jpg"><img src="images/ph_009.jpg" width="100" title="Lorem ipsum dolor sit amet" alt="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."></a>
	<b>//ja-jp.facebook.com/</b></li>
	<li><a href="images/ph_010.jpg"><img src="images/ph_010.jpg" width="100" title="同級生の一人が冗談に" alt="この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。"></a>
	<b>//twitter.com/</b></li>
<!-- /#inner-gallery-thumb --></ul>
<!-- /#block-gallery --></article>

<div>

<p></p>

</div></a>

</section>

<b>//www.yahoo.co.jp/</b></li>

<b>//www.youtube.com/</b></li>

<b>//developer.mozilla.org/ja/docs/Web/JavaScript</b></li>

<b>//teratail.com/</b></li>

<b>//dotinstall.com/</b></li>

<b>//b.hatena.ne.jp/hotentry/it</b></li>

<b>//oscarotero.com/jquery/</b></li>

<b>//www.nicovideo.jp/</b></li>

<b>//ja-jp.facebook.com/</b></li>

<b>//twitter.com/</b></li>

</ul>

</article>

// container
#block-gallery {
	width: 800px;
	margin: 0 auto;
}

// メイン画像
#inner-gallery {
	height: 500px;
	overflow: hidden;
	position: relative;

	a {
		color: white;
		&:hover img {@include opacity(0.8);}
	}

	img {
		position: absolute;
		top: 0;
		left: 0;
	}

	div {
		width: 100%;
		position: absolute;
		bottom: 0;
		left: 0;;
		padding: 20px;
		background: rgba(0, 0, 0, 0.4);
	}
}

// サムネイル
#inner-gallery-thumb {
	font-size: 0;

	li {
		display: inline-block;
		vertical-align: top;
		margin: 20px 10px 0 0;
		&:hover {border: 5px solid #999;}
		&:hover img {margin: -5px;}
	}

	.active {
		border: 5px solid #999;
		img {margin: -5px;}
	}

	// サムネイルのボーダー用のハック
	a {
		overflow: hidden;
		display: inline-block;
	}

	// サムネイルのwidthを指定
	img {
		max-width: 100px;
	}

}

// container

#block-gallery {

width: 800px;

margin: 0 auto;

}

// メイン画像

#inner-gallery {

height: 500px;

overflow: hidden;

position: relative;

a {

color: white;

&:hover img {@include opacity(0.8);}

}

img {

position: absolute;

top: 0;

left: 0;

}

div {

width: 100%;

position: absolute;

bottom: 0;

left: 0;;

padding: 20px;

background: rgba(0, 0, 0, 0.4);

}

// サムネイル

#inner-gallery-thumb {

font-size: 0;

li {

display: inline-block;

vertical-align: top;

margin: 20px 10px 0 0;

&:hover {border: 5px solid #999;}

&:hover img {margin: -5px;}

}

.active {

border: 5px solid #999;

img {margin: -5px;}

}

// サムネイルのボーダー用のハック

a {

overflow: hidden;

display: inline-block;

}

// サムネイルのwidthを指定

img {

max-width: 100px;

}

/*
Gallery with caption
Author: KEITA HIRAI
URL: keitahirai.net
*/
$(function(){
	var heading = $("#inner-gallery h1"), // 見出しタイトル
		text = $("#inner-gallery p"), // 説明テキスト
		link = $("#inner-gallery a"), // リンクURL
		dfThumb = $("#inner-gallery-thumb img:first") // 先頭のサムネイル
	;

	// デフォルトのメインとサムネイル
	heading.text(dfThumb.attr("title"));
	text.text(dfThumb.attr("alt"));
	link.attr("href", $("#inner-gallery-thumb b:first").text());
	$("#inner-gallery-thumb li:first").addClass("active");

	var touch = ("ontouchstart" in document) ? "touchstart" : "click";
	$("#inner-gallery-thumb li").on(touch, function() {
		// メイン領域に画像を挿入
		$("#inner-gallery img").before('<img src="' + $(this).find("a").attr("href") + '">');
		// クリックする前の画像を削除
		$("#inner-gallery img:last").velocity("fadeOut", function() {
			$(this).remove()
		});

		// 見出し、テキスト、URLをコピー
		heading.text($(this).find("img").attr("title")).hide().velocity("fadeIn", {duration: 400});
		text.text($(this).find("img").attr("alt")).hide().velocity("fadeIn", {duration: 400});
		link.attr("href", $(this).find("b").text());

		$(this).addClass("active");
		$(this).siblings().removeClass("active");
		return false;
	});
});

Gallery with caption

Author: KEITA HIRAI

URL: keitahirai.net

$(function(){

var heading = $("#inner-gallery h1"), // 見出しタイトル

text = $("#inner-gallery p"), // 説明テキスト

link = $("#inner-gallery a"), // リンクURL

dfThumb = $("#inner-gallery-thumb img:first") // 先頭のサムネイル

;

// デフォルトのメインとサムネイル

heading.text(dfThumb.attr("title"));

text.text(dfThumb.attr("alt"));

link.attr("href", $("#inner-gallery-thumb b:first").text());

$("#inner-gallery-thumb li:first").addClass("active");

var touch = ("ontouchstart" in document) ? "touchstart" : "click";

$("#inner-gallery-thumb li").on(touch, function() {

// メイン領域に画像を挿入

$("#inner-gallery img").before('<img src="' + $(this).find("a").attr("href") + '">');

// クリックする前の画像を削除

$("#inner-gallery img:last").velocity("fadeOut", function() {

$(this).remove()

});

// 見出し、テキスト、URLをコピー

heading.text($(this).find("img").attr("title")).hide().velocity("fadeIn", {duration: 400});

text.text($(this).find("img").attr("alt")).hide().velocity("fadeIn", {duration: 400});

link.attr("href", $(this).find("b").text());

$(this).addClass("active");

$(this).siblings().removeClass("active");

return false;

});

カスタマイズ

メイン画像のリンクは要らない: a タグを削除する。

別窓ではなく通常リンクにしたい: a タグの target=”_blank” を削除する。

キャプションは要らない

<div>
<h1></h1>
<p></p>
</div>

<div>

<p></p>

</div>

をコメントアウトする。

問題点

下記環境で切り替え時に一瞬チラつくことがある。

IE
Firefox
Mac OS
iOS

許容範囲内だとは思うが、どうしても気になる場合は .velocity 部分を普通のjQueryメソッドに直せばいけるはず。

.fadeOut(400, function() {
	$(this).remove()
});

.fadeIn(400)

.fadeOut(400, function() {

$(this).remove()

});

.fadeIn(400)

Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)

posted with amazlet at 15.08.04

西畑一馬
KADOKAWA/アスキー・メディアワークス
売り上げランキング: 12,539

Amazon.co.jpで詳細を見る

JavaScript逆引きハンドブック

posted with amazlet at 15.08.04

古籏一浩
シーアンドアール研究所
売り上げランキング: 152,274

Amazon.co.jpで詳細を見る

鼻ちょうちん

jQuery・タッチデバイスでも滑らかなフェードで切り替えるキャプション付きギャラリーを作りました [IE8対応]

検証済みブラウザとOS

このjQueryで出来ること、出来ないこと

要点とコード

カスタマイズ

問題点

コメントを投稿する返信をキャンセル

jQuery・タッチデバイスでも滑らかなフェードで切り替えるキャプション付きギャラリーを作りました [IE8対応]

検証済みブラウザとOS

このjQueryで出来ること、出来ないこと

要点とコード

カスタマイズ

問題点

コメントを投稿する 返信をキャンセル

コメントを投稿する返信をキャンセル