WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

Google画像検索風のjQuery

Google画像検索っぽいスライドにするjQuery(レスポンシブ対応)

Googleで画像検索した際に表示される、サムネイルをクリックすると詳細エリアが広がり画像の情報が出てくるやつです。

一応、レスポンシブ対応にもなっていますが、しっかり対応させるには画像処理をひと手間加えた方が良いと思います。
若干入れ子構造が複雑ですが、シンプルで使い易いよく出来たjQueryです。ポートフォリオなどサムネイルを沢山表示したい場合に非常に有効です。またテキストエリアも容易に編集出来るので、説明文なども簡単に入れる事が出来ます。


「<li>」や「<img>」などのインライン要素に対して
HTMLソース上でタグ間を改行させると半角スペースほどの空白(余白)が発生してしまい、扱いに困ることがあります。今回はコメントアウトを入れる事で改行しないようにしています。

デモページ

画像素材

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Google画像検索風スライダー</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
<link href="css/style.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/GoogleImgSearch.js"></script>
</head>
<body>
<header>
<h1>jQuery GoogleImgSearch UI</h1>
</header>

<div id="container">
<ul class="listCover">
	<li class="listItem">
		<img src="img/01.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/01.jpg" alt=""></div>
				<div class="secRight"><p>エリア【1】のダミーテキスト。エリア【1】のダミーテキスト。エリア【1】のダミーテキスト。</p>
        <div class="view">VIEW</div>
        </div><!--/.secfRight-->
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
  --><li class="listItem">
		<img src="img/02.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/02.jpg" alt=""></div>
				<div class="secRight"><p>エリア【2】のダミーテキスト。エリア【2】のダミーテキスト。エリア【2】のダミーテキスト。エリア【2】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/03.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/03.jpg" alt=""></div>
				<div class="secRight"><p>エリア【3】のダミーテキスト。エリア【3】のダミーテキスト。エリア【3】のダミーテキスト。エリア【3】のダミーテキスト。エリア【3】のダミーテキスト。エリア【3】のダミーテキスト。エリア【3】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/04.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/04.jpg" alt=""></div>
				<div class="secRight"><p>エリア【4】のダミーテキスト。エリア【4】のダミーテキスト。エリア【4】のダミーテキスト。エリア【4】のダミーテキスト。エリア【4】のダミーテキスト。エリア【4】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/05.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/05.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/06.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/06.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/07.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/07.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/08.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/08.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/09.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/09.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/10.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/10.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/11.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/11.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/12.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/12.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/13.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/13.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/14.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/14.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/15.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/15.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/16.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/16.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/17.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/17.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/18.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/18.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/19.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/19.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/20.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/20.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/21.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/21.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/23.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/23.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/24.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/24.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/25.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/25.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/26.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/26.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/27.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/27.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/28.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/28.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/29.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/29.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/30.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/30.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li>
</ul><!--/.listCover-->
</div>
</body>
</html>
style.css
@charset "utf-8";
/* CSS Document */
/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, 
address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
ul, ol {
  list-style: none; /* マーカーを消す */
}
a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}

/*レイアウト*/

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 {
	padding: 10px 0;
	text-align: center;
	display: inline-block;
	*display: inline;
	*zoom: 1;
	cursor: pointer;
}
.listCover .listItem img {
	width: 300px; /*サムネイルの大きさ*/
}
.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: #333;
	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%;
	color: #fff;
}
.secRight p {
  font-size: 16px;
  line-height: 1.2em;
}

.view{
  border:1px solid white;
  border-radius: 5px;
  padding:10px 0;
  width:60%;
  text-align: center;
  margin: 160px auto;
  transition: 0.3s ease-in-out;
}
.view:hover{
  background-color:white;
  color: #333;
  cursor: pointer;
}



/* ===========================================
	SizeAdjustment
=========================================== */
@media screen and (max-width: 959px) {
	.expandField .selfRepInner .secLeft img {
		width: 80%;
	}
}
@media screen and (max-width: 640px) {
	.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;}
GoogleImgSearch.js
// JavaScript Document

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

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


詳しい説明はこちら
black-flag.net