huskycyan

webデザインを中心に学習したことを日記として残しています。

jQuery・GoogleImgSearchUI

モーダルウィンドウ型のグーグルのイメージ検索のようなjQuery・GoogleImgSearchUI。
そろそろポートフォリオを作らなくてはいけないため学校の講師が相手に作品を見せやすいjQueryとして紹介してくれた。
使ってみたが扱いやすい。相手に作品を見せるのにはうってつけだと思う。

特徴としては自動的にサムネイルの小型サイズを生成する為、画像を大型サイズ1種類で済む。
これがかなり助かる。
画像は500*500で指定したがちょっと大きいかも・・・

出来上がりイメージ

f:id:husky1127:20141114133343j:plain

html

<body>
<h1>jQuery GoogleImgSearch UI</h1>

<ul class="listCover">
	<li class="listItem">
		<img src="img/1.jpg" alt=""><!--サムネイル画像-->
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/1.jpg" alt=""></div><!--左の画像-->
				<div class="secRight"><p>エリア【1】のダミーテキスト。エリア【1】のダミーテキスト。エリア【1】のダミーテキスト。エリア【1】のダミーテキスト。エリア【1】のダミーテキスト。エリア【1】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/2.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/2.jpg" alt=""></div>
				<div class="secRight"><p>エリア【2】のダミーテキスト。エリア【2】のダミーテキスト。エリア【2】のダミーテキスト。エリア【2】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	-->
<!--以下リストは-省略->
</ul>

css

body {
	font-size: 100%;
	line-height: 160%;
	font-family: "メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Osaka", "MS Pゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;
	color: #000;
	text-align: center;
	background: #fff;
	overflow-y: scroll;
}
*html body {overflow-y: auto;} /* IE6 */
*:first-child+html body {overflow-y: auto;} /* IE7 */

a:link { text-decoration:none; color: #000;}
a:visited { text-decoration:none; color: #000;}
a:active { text-decoration:none; color: #000;}
a:hover { text-decoration:none; color: #000;}

h1 {
	margin-bottom: 20px;
	padding: 10px 0;
	background: #000;
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
}
h2 {
	padding: 30px 0;
	width: 100%;
	font-size: 12px;
}

#container {
  width:100%;
  margin:0 auto;
	text-align: center;
}

/* .listCover
------------------------- */
.listCover {
	margin: 0 auto;
	text-align: left;
}

/* .listItem
------------------------- */
.listCover .listItem {
	padding: 10px 0;
	text-align: center;
	display: inline-block;
	*display: inline;
	*zoom: 1;
	cursor: pointer;
}
.listCover .listItem img {
	width: 120px;/*サムネイル画像の大きさ*/
}
.listCover .active {
	background: url(../img/activeArrow.gif) no-repeat bottom center;
}
.listCover .listItem .selfRep {
	display: none;
}

/* .expandField
------------------------- */
.expandField {
	padding: 10px 0;
	width: 100%;
	text-align: left;
	display: block;
	background: #222;
	float: left;
	position: relative;
	overflow: hidden;
}
.expandField .btnClose {
	top: 0;
	right: 0;
	width: 60px;
	height: 60px;
	display: block;
	background: url(../img/btnClose.gif) 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/btnPrev.gif) 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/btnNext.gif) no-repeat top left;
	position: absolute;
	overflow: hidden;
	cursor: pointer;
}
.expandField .selfRepInner {
	padding: 10px 80px;/*詳細の上下左右調節*/
	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;
	color: #fff;
}

/* ===========================================
	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;
	}
}

/* =======================================
	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

$(function(){
	var setList = $('.listCover'),  //全体を囲う<ul>のクラス名
	setItem = $('.listItem'),  //<li>に対するクラス名
	setReplace = $('.selfRep'),  //詳細エリアで表示する要素のクラス名
	listBaseWidth = 130,  //一覧画面の<li>の幅
	thumbOpacity = 0.8,  //サムネイルマウスオーバー時の透過度
	expandHeight = 340,  //詳細エリアの高さ
	expandFadeTime = 300,  //詳細エリア展開時のスライドスピード
	expandEasing = 'linear',  //詳細エリア展開時のイージング
	switchFadeTime = 1000,  //詳細エリア展開後のNEXT/BACK切り替え時のフェードスピード
	switchEasing = 'linear';  //詳細エリア展開後のNEXT/BACK切り替え時のイージング

	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
	});
});