初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

jQuery Google画像検索風に表示する

Google風に画像を表示できるjQueryを記述します。

Googleで画像を検索するとサムネイルが出てきます。
画像をクリックするとスペースが空いて大きな画像を
表示します。
f:id:bellsmarket:20150516210918p:plain

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/google.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="js/google.js"></script>
<title>Google風画像表示</title>
<style>

</style>
</head>

<body>
<header>
	<h1>jQuery GoogleimgSearch UI</h1>
</header>
<div id="container">
		<ul class="listCover"><!--サムネイルが入ってる大きい枠-->
			<li class="listItem">
				<img src="img/1.png" alt="">
				<div class="selfRep">
					<div class="selfRepInner">
						<div class="secLeft"><img src="img/1.png" alt=""></div>
						<div class="secRight"><p>エリア【1】のダミーテキストエリア【1】のダミーテキストエリア【1】のダミーテキスト</p></div>
					</div><!--/selfRepInner-->
				</div><!--/selfRep-->
			</li><!--
--><li class="listItem">
				<img src="img/2.png" alt="">
				<div class="selfRep">
					<div class="selfRepInner">
						<div class="secLeft"><img src="img/2.png" alt=""></div>
						<div class="secRight"><p>エリア【2】のダミーテキストエリア【2】のダミーテキストエリア【2】のダミーテキスト</p></div>
					</div><!--/selfRepInner-->
				</div><!--/selfRep-->
			</li><!--
--><li class="listItem">
				<img src="img/3.png" alt="">
				<div class="selfRep">
					<div class="selfRepInner">
						<div class="secLeft"><img src="img/3.png" alt=""></div>
						<div class="secRight"><p>エリア【3】のダミーテキストエリア【3】のダミーテキストエリア【3】のダミーテキスト</p></div>
					</div><!--/selfRepInner-->
				</div><!--/selfRep-->
			</li><!--
--><li class="listItem">
				<img src="img/4.png" alt="">
				<div class="selfRep">
					<div class="selfRepInner">
						<div class="secLeft"><img src="img/4.png" alt=""></div>
						<div class="secRight"><p>エリア【4】のダミーテキストエリア【4】のダミーテキストエリア【4】のダミーテキスト</p></div>
					</div><!--/selfRepInner-->
				</div><!--/selfRep-->
			</li><!--
--><li class="listItem">
				<img src="img/5.png" alt="">
				<div class="selfRep">
					<div class="selfRepInner">
						<div class="secLeft"><img src="img/5.png" alt=""></div>
						<div class="secRight"><p>エリア【5】のダミーテキストエリア【5】のダミーテキストエリア【5】のダミーテキスト</p></div>
					</div><!--/selfRepInner-->
				</div><!--/selfRep-->
			</li><!--
--><li class="listItem">
				<img src="img/6.png" alt="">
				<div class="selfRep">
					<div class="selfRepInner">
						<div class="secLeft"><img src="img/6.png" alt=""></div>
						<div class="secRight"><p>エリア【6】のダミーテキストエリア【6】のダミーテキストエリア【6】のダミーテキスト</p></div>
					</div><!--/selfRepInner-->
				</div><!--/selfRep-->
			</li><!--
--><li class="listItem">
				<img src="img/7.png" alt="">
				<div class="selfRep">
					<div class="selfRepInner">
						<div class="secLeft"><img src="img/7.png" alt=""></div>
						<div class="secRight"><p>エリア【7】のダミーテキストエリア【7】のダミーテキストエリア【7】のダミーテキスト</p></div>
					</div><!--/selfRepInner-->
				</div><!--/selfRep-->
			</li><!--
--><li class="listItem">
				<img src="img/8.png" alt="">
				<div class="selfRep">
					<div class="selfRepInner">
						<div class="secLeft"><img src="img/8.png" alt=""></div>
						<div class="secRight"><p>エリア【8】のダミーテキストエリア【8】のダミーテキストエリア【8】のダミーテキスト</p></div>
					</div><!--/selfRepInner-->
				</div><!--/selfRep-->
			</li><li class="listItem">
				<img src="img/9.png" alt="">
				<div class="selfRep">
					<div class="selfRepInner">
						<div class="secLeft"><img src="img/9.png" alt=""></div>
						<div class="secRight"><p>エリア【9】のダミーテキストエリア【9】のダミーテキストエリア【9】のダミーテキスト</p></div>
					</div><!--/selfRepInner-->
				</div><!--/selfRep-->
			</li><!--
--><li class="listItem">
				<img src="img/10.png" alt="">
				<div class="selfRep">
					<div class="selfRepInner">
						<div class="secLeft"><img src="img/10.png" alt=""></div>
						<div class="secRight"><p>エリア【10】のダミーテキストエリア【10】のダミーテキストエリア【10】のダミーテキスト</p></div>
					</div><!--/selfRepInner-->
				</div><!--/selfRep-->
			</li><!--
--><li class="listItem">
				<img src="img/11.png" alt="">
				<div class="selfRep">
					<div class="selfRepInner">
						<div class="secLeft"><img src="img/11.png" alt=""></div>
						<div class="secRight"><p>エリア【11】のダミーテキストエリア【11】のダミーテキストエリア【11】のダミーテキスト</p></div>
					</div><!--/selfRepInner-->
				</div><!--/selfRep-->
			</li><!--
--><li class="listItem">
				<img src="img/12.png" alt="">
				<div class="selfRep">
					<div class="selfRepInner">
						<div class="secLeft"><img src="img/12.png" alt=""></div>
						<div class="secRight"><p>エリア【12】のダミーテキストエリア【12】のダミーテキストエリア【12】のダミーテキスト</p></div>
					</div><!--/selfRepInner-->
				</div><!--/selfRep-->
			</li><!--
--><li class="listItem">
				<img src="img/13.png" alt="">
				<div class="selfRep">
					<div class="selfRepInner">
						<div class="secLeft"><img src="img/13.png" alt=""></div>
						<div class="secRight"><p>エリア【13】のダミーテキストエリア【13】のダミーテキストエリア【13】のダミーテキスト</p></div>
					</div><!--/selfRepInner-->
				</div><!--/selfRep-->
			</li><!--
--><li class="listItem">
				<img src="img/14.png" alt="">
				<div class="selfRep">
					<div class="selfRepInner">
						<div class="secLeft"><img src="img/14.png" alt=""></div>
						<div class="secRight"><p>エリア【14】のダミーテキストエリア【14】のダミーテキストエリア【14】のダミーテキスト</p></div>
					</div><!--/selfRepInner-->
				</div><!--/selfRep-->
			</li><!--
--><li class="listItem">
				<img src="img/15.png" alt="">
				<div class="selfRep">
					<div class="selfRepInner">
						<div class="secLeft"><img src="img/15.png" alt=""></div>
						<div class="secRight"><p>エリア【15】のダミーテキストエリア【15】のダミーテキストエリア【15】のダミーテキスト</p></div>
					</div><!--/selfRepInner-->
				</div><!--/selfRep-->
			</li><!--
--><li class="listItem">
				<img src="img/16.png" alt="">
				<div class="selfRep">
					<div class="selfRepInner">
						<div class="secLeft"><img src="img/16.png" alt=""></div>
						<div class="secRight"><p>エリア【16】のダミーテキストエリア【16】のダミーテキストエリア【16】のダミーテキスト</p></div>
					</div><!--/selfRepInner-->
				</div><!--/selfRep-->
			</li><!--
--><li class="listItem">
				<img src="img/17.png" alt="">
				<div class="selfRep">
					<div class="selfRepInner">
						<div class="secLeft"><img src="img/17.png" alt=""></div>
						<div class="secRight"><p>エリア【17】のダミーテキストエリア【17】のダミーテキストエリア【17】のダミーテキスト</p></div>
					</div><!--/selfRepInner-->
				</div><!--/selfRep-->
			</li><!--
--><li class="listItem">
				<img src="img/18.png" alt="">
				<div class="selfRep">
					<div class="selfRepInner">
						<div class="secLeft"><img src="img/18.png" alt=""></div>
						<div class="secRight"><p>エリア【18】のダミーテキストエリア【18】のダミーテキストエリア【18】のダミーテキスト</p></div>
					</div><!--/selfRepInner-->
				</div><!--/selfRep-->
			</li>
		</ul>
</div>
<ul>

</ul>
</body>
</html>
@charset "UTF-8";
/* CSS Document */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	vertical-align: baseline;
	font-family: inherit;
	font-style: inherit;
	font-weight: inherit;
	line-height: 1.0;
/*	outline: 0;*/
}

html {
	font-size: 75%;
	-webkit-text-size-adjust: none;
}

img {
	vertical-align: text-bottom;
	-ms-interpolation-mode: bicubic;
	width:400px;
	height:300px;
}

a {
	-webkit-tap-highlight-color: transparent;
}
ol, ul {
	list-style: none;
}

table {
	border-collapse: collapse;
/*	border-collapse: separate;*/
	border-spacing: 0;
}

caption, th, td {
	font-weight: normal;
	text-align: left;
	vertical-align: top;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}

blockquote, q {
	quotes: "" "";
}

a:focus {
/*\*/
	overflow: hidden;
/**/
}

option {
	padding-right: 10px;
}

/* ------------------------------
	HTML5 ELEMENTS
------------------------------ */
header,article,aside,section,footer,
nav,menu,details,hgroup,summary {
	display: block;
}


body {
	overflow-y: scroll;
}
*html body {overflow-y: auto;} /* IE6 */
*:first-child+html body {overflow-y: auto;} /* IE7 */

h1 {
	margin-bottom: 20px;
	padding: 15px 0;
	background: #000;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}

/* .listCover
------------------------- */
.listCover {
	margin: 0 auto;
	text-align: left;
}
/* .listItem
------------------------- */
.listCover .listItem {
	text-align: center;
	display: inline-block;
	*display: inline;
	*zoom: 1;
	cursor: pointer;	
	font-size:0;
}
.listCover .listItem img {
	width: 200px; /*サムネイルの大きさ*/
	height:150px;
}
.listCover .active {
	background: url(../img/activeArrow.gif)  no-repeat bottom center;
}
.listCover .listItem .selfRep {
	display: none;
}

/* .expandField
------------------------- */
.expandField {
	padding: 0;
	width: 100%;
	text-align: left;
	display: block;
	background: #222;
	float: left;
	position: relative;
	overflow: hidden;
}
.expandField .btnClose {
	top: 10px;
	right: 0;
	width: 60px;
	height: 60px;
	display: block;
	background: url(../img/close.png) no-repeat top left;
	position: absolute;
	overflow: hidden;
	cursor: pointer;
}
.expandField .btnPrev {
	top: 120px;
	left: 0;
	width: 60px;
	height: 60px;
	display: block;
	background: url(../img/prev.png) no-repeat top left;
	position: absolute;
	overflow: hidden;
	cursor: pointer;
}
.expandField .btnNext {
	top: 120px;
	right: 0;
	width: 60px;
	height: 60px;
	display: block;
	background: url(../img/next.png) no-repeat top left;
	position: absolute;
	overflow: hidden;
	cursor: pointer;
}
.expandField .selfRepInner {
	padding: 20px 50px;
	text-align: center;
	position: relative;
}
.expandField .selfRepInner .secLeft,
.expandField .selfRepInner .secRight {
	width: 50%;
	float: left;
}
.expandField .selfRepInner .secLeft {
	text-align: center;
}
.expandField .selfRepInner .secRight {
	text-align: left;
	width: 40%;
	letter-spacing: normal;
	color: #fff;
}
.secRight p {
  font-size: 16px;
  line-height: 1.2em;
}
/* ===========================================
	SizeAdjustment
=========================================== */
@media screen and (max-width: 600px) {
	.expandField .selfRepInner .secLeft img {
		width: 80%;
	}
}
@media screen and (max-width: 480px) {
	.expandField .selfRepInner .secLeft {
		display: none;
	}
	.expandField .selfRepInner .secRight {
		width: 100%;
		float: none;
	}
	.secLeft img{
		width:200px;
		height:150px;
	}
}

=======================================
	ClearFix
======================================= */
.listCover:before,
.listCover:after,
.expandField .selfRepInner:before,
.expandField .selfRepInner:after {
	content: " ";
	display: table;
}
.listCover:after,
.expandField .selfRepInner:after {clear: both;}
.listCover,
.expandField .selfRepInner {*zoom: 1;}
// JavaScript Document
// JavaScript Document

$(function(){
	var setList = $('.listCover'),
	setItem = $('.listItem'),
	setReplace = $('.selfRep'),
	listBaseWidth = 200,
	thumbOpacity = 0.8,
	expandHeight = 340,
	expandFadeTime = 300,
	expandEasing = 'linear',
	switchFadeTime = 1000,
	switchEasing = 'swing';

	setList.each(function(){
		var targetObj = $(this);

		var findItem = targetObj.find(setItem),
		findElm = targetObj.find(setReplace);

		// リストアイテムクリック
		findItem.click(function(){
			if($(this).hasClass('active')){
				closeExpandActive = targetObj.find('.expandField');
				closeExpandActive.stop().animate({height:'0',opacity:'0'},expandFadeTime,expandEasing,function(){
					closeExpandActive.remove();
				});
				findItem.removeClass('active');
			} else {
				var setExpand = $('.expandField'),
				findExpand = targetObj.find(setExpand),
				thisElm = $(this).find(setReplace).html();

				// 展開ボックス制御
				if(0 < findExpand.size()){
					findExpand.empty().html(thisElm);
					$(this).after(findExpand).next().append('<span class="btnPrev"></span><span class="btnNext"></span><span class="btnClose"></span>');
					var setReplaceInner = $('.selfRepInner'),
					findInner = targetObj.find(setReplaceInner);
					findInner.css({opacity:'0'}).stop().animate({opacity:'1'},switchFadeTime,switchEasing);
				} else {
					$(this).after('<li class="expandField">' + thisElm + '</li>').next().css({height:'0', opacity:'0'}).stop().animate({height:expandHeight, opacity:'1'},expandFadeTime,expandEasing).append('<span class="btnPrev"></span><span class="btnNext"></span><span class="btnClose"></span>');
				}

				// スクロール位置調整
				var thisOffset = $(this).find('img').offset();
				$('html,body').animate({scrollTop:(thisOffset.top-10)},200,'linear');

				// 操作ボタン動作
				function switchNext(){
					var setActiveN = targetObj.find('.active');
					setActiveN.each(function(){
						var listLenghN = findItem.length,
						listIndexN = findItem.index(this),
						listCountN = listIndexN+1,
						findItemFirst = findItem.first();

						if(listLenghN == listCountN){
							findItemFirst.click();
						} else {
							$(this).next().next().click();
						}
					});
				}
				function switchPrev(){
					var setActiveP = targetObj.find('.active');
					setActiveP.each(function(){
						var listLenghP = findItem.length,
						listIndexP = findItem.index(this),
						listCountP = listIndexP+1,
						findItemLast = findItem.last();

						if(1 == listCountP){
							findItemLast.click();
						} else {
							$(this).prev().click();
						}
					});
				}
				function switchHide(){
					closeExpand = targetObj.find('.expandField');
					closeExpand.stop().animate({height:'0',opacity:'0'},expandFadeTime,expandEasing,function(){
						closeExpand.remove();
					});
					findItem.removeClass('active');
				}

				$(this).addClass('active').siblings().removeClass('active');

				var btnPrev = targetObj.find('.btnPrev'),btnNext = targetObj.find('.btnNext'),btnClose = targetObj.find('.btnClose');
				btnPrev.click(function(){switchPrev();});
				btnNext.click(function(){switchNext();});
				btnClose.click(function(){switchHide();});

			}
		});

		// サムネイルロールオーバー
		var agent = navigator.userAgent;
		if(!(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1)){
			findItem.hover(function(){
				$(this).stop().animate({opacity:thumbOpacity},200);
			},function(){
				$(this).stop().animate({opacity:'1'},200);
			});
		}

		// リキッド操作
		function listAdjust(){
			var ulWrap = targetObj.width(),
			ulNum = Math.floor(ulWrap / listBaseWidth),
			liFixed = Math.floor(ulWrap / ulNum);
			findItem.css({width: (liFixed)});
		}
		$(window).resize(function(){listAdjust();}).resize();
		$(window).load(function(){setTimeout(function(){listAdjust();},200);}); // for IE8
	});
});
topへ戻る