jQuery・タッチデバイス対応のマウスオーバーギャラリーを作りました [IE8対応]

150813_001

デモを見る

下記記事のマウスオーバー版を作成。
フェードに挑戦したがバグを解決できないため、シンプルな切り替えのみ。

検証済みブラウザとOS

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

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

出来ること

サムネイルをマウスオーバーで、メイン領域を切り替え
タッチデバイスでは、サムネイルをタッチすると瞬時に切り替え
テキスト領域の高さは、テキスト量の成り行きで変化
サムネイル用画像は不要
インラインHTMLの表示

出来ないこと

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

要点とコード

メイン画像とサムネイルは同じ画像
サムネイルのアクティブ時の装飾は、CSSで調整
キャプションの背景は rgba() のため、IE8で使えない

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="js/mouseoverGallery.js"></script>

1 2	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script src="js/mouseoverGallery.js"></script>

<article id="block-gallery">
<div id="inner-gallery">
<section id="gallery-01">
<a href="//www.yahoo.co.jp/"><img src="images/ph_001.jpg" width="800" height="500">
<div><h1>後ろで大きな爆発音がした</h1>
<p>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。</p></div>
</a>
</section>

<section id="gallery-02"><a href="//www.youtube.com/">
<img src="images/ph_002.jpg" width="800" height="500">
<div><h1>親譲りの無鉄砲で小供の時から損ばかりしている</h1>
<p>なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。</p></div>
</a></section>

<section id="gallery-03"><a href="//developer.mozilla.org/ja/docs/Web/JavaScript">
<img src="images/ph_003.jpg" width="800" height="500">
<div><h1>小学校に居る時分学校の二階から飛び降りて</h1>
<p>新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。</p></div>
</a></section>

<section id="gallery-04"><a href="//teratail.com/">
<img src="images/ph_004.jpg" width="800" height="500">
<div><h1>一週間ほど腰を抜かした事がある</h1>
<p>弱虫やーい。と囃したからである。</p></div>
</a></section>

<section id="gallery-05"><a href="//dotinstall.com/">
<img src="images/ph_005.jpg" width="800" height="500">
<div><h1>なぜそんな無闇をしたと聞く人があるかも知れぬ</h1>
<p>小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。</p></div>
</a></section>

<section id="gallery-06"><a href="//b.hatena.ne.jp/hotentry/it">
<img src="images/ph_006.jpg" width="800" height="500">
<div><h1>別段深い理由でもない</h1>
<p>つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。</p></div>
</a></section>

<section id="gallery-07"><a href="//oscarotero.com/jquery/">
<img src="images/ph_007.jpg" width="800" height="500">
<div><h1>Lorem ipsum dolor sit amet</h1>
<p>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.</p></div>
</a></section>
<!-- /#inner-gallery --></div>

<ul id="inner-gallery-thumb">
	<li><a href="#gallery-01"><img src="images/ph_001.jpg" width="100"></a></li>
	<li><a href="#gallery-02"><img src="images/ph_002.jpg" width="100"></a></li>
	<li><a href="#gallery-03"><img src="images/ph_003.jpg" width="100"></a></li>
	<li><a href="#gallery-04"><img src="images/ph_004.jpg" width="100"></a></li>
	<li><a href="#gallery-05"><img src="images/ph_005.jpg" width="100"></a></li>
	<li><a href="#gallery-06"><img src="images/ph_006.jpg" width="100"></a></li>
	<li><a href="#gallery-07"><img src="images/ph_007.jpg" width="100"></a></li>
<!-- /#inner-gallery-thumb --></ul>
<!-- /#block-gallery --></article>

<div><h1>後ろで大きな爆発音がした</h1>

<p>親譲りの無鉄砲で小供の時から損ばかりしている。小学校に居る時分学校の二階から飛び降りて一週間ほど腰を抜かした事がある。</p></div>

</a>

</section>

<div><h1>親譲りの無鉄砲で小供の時から損ばかりしている</h1>

<p>なぜそんな無闇をしたと聞く人があるかも知れぬ。別段深い理由でもない。</p></div>

</a></section>

<div><h1>小学校に居る時分学校の二階から飛び降りて</h1>

<p>新築の二階から首を出していたら、同級生の一人が冗談に、いくら威張っても、そこから飛び降りる事は出来まい。</p></div>

</a></section>

<div><h1>一週間ほど腰を抜かした事がある</h1>

<p>弱虫やーい。と囃したからである。</p></div>

</a></section>

<div><h1>なぜそんな無闇をしたと聞く人があるかも知れぬ</h1>

<p>小使に負ぶさって帰って来た時、おやじが大きな眼をして二階ぐらいから飛び降りて腰を抜かす奴があるかと云ったから、この次は抜かさずに飛んで見せますと答えた。</p></div>

</a></section>

<div><h1>別段深い理由でもない</h1>

<p>つれづれなるまゝに、日暮らし、硯にむかひて、心にうつりゆくよしなし事を、そこはかとなく書きつくれば、あやしうこそものぐるほしけれ。</p></div>

</a></section>

<div><h1>Lorem ipsum dolor sit amet</h1>

<p>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.</p></div>

</a></section>

</div>

</ul>

</article>

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

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

	section {
		height: 500px;
		position: relative;
	}

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

	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 {
		cursor: default;
		overflow: hidden;
		display: inline-block;
	}

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

// container

#block-gallery {

width: 800px;

margin: 0 auto;

}

// メイン画像

#inner-gallery {

height: 500px;

overflow: hidden;

section {

height: 500px;

position: relative;

}

a {

color: white;

text-decoration: none;

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

}

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 {

cursor: default;

overflow: hidden;

display: inline-block;

}

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

img {

max-width: 100px;

}

/*
Mouseover Gallery
Author: KEITA HIRAI
URL: keitahirai.net
*/
$(function() {
	$("#inner-gallery a").attr("target", "_blank");
	$("#inner-gallery-thumb li:first").addClass("active");

	var over = ("ontouchstart" in document) ? "touchstart" : "mouseover";
	$("#inner-gallery-thumb li").on(over, function() {
		$($(this).find("a").attr("href")).prependTo("#inner-gallery");

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

	$("#inner-gallery-thumb a").click(function() {
		return false;
	});
});

Mouseover Gallery

Author: KEITA HIRAI

URL: keitahirai.net

$(function() {

$("#inner-gallery a").attr("target", "_blank");

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

var over = ("ontouchstart" in document) ? "touchstart" : "mouseover";

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

$($(this).find("a").attr("href")).prependTo("#inner-gallery");

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

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

return false;

})

$("#inner-gallery-thumb a").click(function() {

return false;

});

カスタマイズ

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

別窓ではなく通常リンクにしたい

$("#inner-gallery a").attr("target", "_blank");

1	$("#inner-gallery a").attr("target", "_blank");

をコメントアウトする。

キャプションは要らない

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

<div>

</div>

を削除する。

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

posted with amazlet at 15.08.12

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

Amazon.co.jpで詳細を見る

鼻ちょうちん

jQuery・タッチデバイス対応のマウスオーバーギャラリーを作りました [IE8対応]

検証済みブラウザとOS

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

要点とコード

カスタマイズ

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

jQuery・タッチデバイス対応のマウスオーバーギャラリーを作りました [IE8対応]

検証済みブラウザとOS

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

要点とコード

カスタマイズ

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

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