Googleさんの画像検索で使われているサムネイルをクリックすると
すぐ下にアコーディオン形式で詳細エリアが広がるUI。

このUI動作を実装するには「SuperBox」というjQueryプラグイン等が有名だったりしますが
画面仕様等ちょっと理想と違う構成のところがあったり動作が少し重かったりしたので
実験がてらjQueryを使ってGoogle画像検索のUIを試しに作ってみたので紹介してみたいと思います。

jQueryでGoogle画像検索の様なUIを実装する実験(レスポンシブ対応)

レスポンシブ動作などブラウザ枠を目いっぱいで表示するタイプなので
まずは別枠表示で動作サンプルから。。

jQueryでGoogle画像検索の様なUIを実装する実験(レスポンシブ対応)

サンプルでは25枚の画像を一覧で並べて
ウィンドウサイズに合わせて、
1行に並べられる画像数等がリキッドレイアウトされます。

サムネイルをクリックすると
すぐ下に詳細エリアが展開されます。

詳細エリアにはNEXT/BACKボタンでの切り替えの他に
閉じるボタンを配置してあります。

簡単な動作仕様については以上になります。

全体構成についてまずはHTMLから。
(全て記載すると長いので一部割愛します)

◆HTML
<ul class="listCover">
	<li class="listItem">
		<img src="img/photo1.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/photo1.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/photo2.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/photo2.jpg" alt=""></div>
				<div class="secRight"><p>エリア【2】のダミーテキスト。エリア【2】のダミーテキスト。エリア【2】のダミーテキスト。エリア【2】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li><!--
	--><li class="listItem">
		<img src="img/photo3.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/photo3.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/photo4.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/photo4.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/photo5.jpg" alt="">
		<div class="selfRep">
			<div class="selfRepInner">
				<div class="secLeft"><img src="img/photo5.jpg" alt=""></div>
				<div class="secRight"><p>エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。エリア【5】のダミーテキスト。</p></div>
			</div><!--/.selfRepInner-->
		</div><!--/.selfRep-->
	</li>
      ・
      ・
      中略
      ・
      ・
</ul><!--/.listCover-->

全体を<ul><li>構成にしてあり、
全体を囲う<ul>にクラス「.listCover」の名前(任意)を付け
サムネイル部分の<li>要素には「.listItem」と名前(任意)を付けてあります。

<li>「.listItem」にはサムネイルとして表示する画像の他に
「.selfRep」と名付けた<div>要素を配置してあり、(ここの名前も任意)
この<div>「.selfRep」の中に入る<div>「.selfRepInner」とセットで構成されており
これらは一覧画面では非表示となります。

サムネイルクリックで詳細エリア展開時に
この2つの<div>で内に記載された内容が表示される構成になっており
この中には適当HTMLを好きなように入れ込める仕様になっています。

全体構成上、リスト要素を「inline-block」や「inline」で制御しているので
面倒なのですが<li>ごとの改行にはコメントアウトをして
改行を削除しておく必要があります。
(もしくは最終的にHTMLソースを改行せずに全て一行にするか)

HTML構成については以上になります。

そしてCSSは以下の様に。

◆CSS
/* .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: 50px 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;}

サムネイル表示用リストとなる「.listItem」に対しては「display:inline-block」と
IE6,7用にハックで「inline」にしておく必要があり
サムネイル時に非表示要素となる「.selfRep」は
CSS側では「display:none」にしておく必要があります。

サムネイルクリック後の詳細エリアは「.expandField」となっており
「width:100%」「display:block」「float:left」は
最低限必要となっている要素ですが
その他は装飾等レイアウト調整用となっているので
見た目を変える場合はこの中を変更する必要があります。

「.btnClose」は閉じるボタン
「.btnPrev」は前へボタン
「.btnNext」は次へボタン
となっています。

詳細エリア「.expandField」の高さについては
スクリプト側で設定する様になっているので
CSSでは「height」の値は設定しません。

後半にメディアクエリーを使ってレイアウト制御が入っていますが
サンプル上のレイアウトを保つ為のものになっており
必ず必要というものではありません。

上記のCSS指定とは別に、
リキッド動作の際にウィンドウ幅を計算する上で
スクロールバーの有り無しの状態によって
全体幅の計算がおかしくなってしまうブラウザもあるので
bodyに対してスクロールバーの表示制御を入れてあります。

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

CSSに関しては以上です。

そして実際の動作スクリプトは以下の様になります。

◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
	var setList = $('.listCover'),
	setItem = $('.listItem'),
	setReplace = $('.selfRep'),
	listBaseWidth = 130,
	thumbOpacity = 0.8,
	expandHeight = 300,
	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
	});
});
</script>

スクリプト開始部分にある設定値の内容は以下の様になっています。

var setList = $(‘.listCover’) 全体を囲う<ul>のクラス名(IDでも可)
setItem = $(‘.listItem’) <li>に対するクラス名
setReplace = $(‘.selfRep’) 詳細エリアで表示する要素のクラス名(一覧では非表示部分)
listBaseWidth = 130 一覧画面でリキッド調整する際の基準値(<li>に対する基準幅)
thumbOpacity = 0.8 サムネイルマウスオーバー時の透過度
expandHeight = 300 詳細エリアの高さ
expandFadeTime = 300 詳細エリア展開時のスライドスピード
expandEasing = ‘linear’ 詳細エリア展開時のイージング
switchFadeTime = 1000 詳細エリア展開後のNEXT/BACK切り替え時のフェードスピード
switchEasing = ‘linear’ 詳細エリア展開後のNEXT/BACK切り替え時のイージング

これらの設定値を変更することでもろもろ調整が可能になっています。
※非表示インナー要素の「.selfRepInner」のみ、名前を変える場合は
39行目「setReplaceInner = $(‘.selfRepInner’)」を変更してください。

一覧画面でのサムネイルを並べるリキッド動作については
「listBaseWidth = 130」で基準値をセットして
ウィンドウサイズに対してこの値を使って割って
一つ一つの<li>リストに幅を割り振るようになっています。
(サンプルでは100pxのサムネイル画像に対して少し余白をあけた130pxに設定)

スクリプト全体的にあまり汎用性のある構成ではありませんが
設定値を少し調整するだけで簡単に設置することは可能になっているかと思います。

全体をリキッドおよびレスポンシブ対応しているので
PCブラウザのみでなくiPhoneやiPadやAndroidの
スマホ及びタブレットでも動作可能です。
※いちよIE6,7でも動作するようになっています。

少々特殊なUIではありますが
ギャラリーページや制作会社などの制作実績ページなど
一覧画面からちょっとした詳細画面を表示したい場合などに使えるかと思っています。

モーダルウィンドウと違って画面全体にオーバーレイされることもないので
元の画面を生かしつつ別ウィンドウを表示できる使い勝手の良いUIになるかと。

jQueryでGoogle画像検索の様なUIを実装する際にぜひ。。。

サンプルファイルをダウンロードしたい方はこちらから

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (29)

  • yuko | 2013.11.26 16:30

    なんとお礼をいっていいのやら!!!
    本当に本当にありがとうございます。
    只今作成中のサイトに使わせていただきます。

  • BlackFlag | 2013.11.26 19:27

    >yukoさん
    コメントありがとうございます。
    このGoogle画像検索UIスクリプトがお役に立ったようで
    嬉しく思っております。

    装飾等のカスタマイズもできる限り
    シンプルさを心掛けて構成しておりますので
    サイトに自由に組み込んでいただけると幸いです。

    よろしくお願いします。

  • asako | 2013.11.26 21:23

    はじめまして。素敵なサンプルありがとうございます。今までも色々と使わせていただいてます。
    こちらのGoogle検索風サンプルも現在作成中のサイトで使わせていただこうと思っているのですが、
    レスポンシブではなく、テンプレートを使用したページのコンテンツ部分に使用したいと思っています。
    その場合の一覧画面でのレイアウトについての質問なのですが、
    ”一覧画面での・・・「listBaseWidth = 130」で基準値をセットしてウィンドウサイズに対してこの値を使って割って・・・”とのことですが、コンテンツの幅に対して均等割りする方法はありますでしょうか?
    listBaseWidthの数値を変えたりしてみたのですが、上手くいかなくて。。
    ちなみに、サムネイル画像はサンプルと同じ120px、コンテンツ幅は760pxです。
    jQueryの知識が足りず、ご迷惑な質問かもしれませんが、ご回答いただけると助かります。
    どうぞよろしくお願いします。

  • BlackFlag | 2013.11.30 11:17

    >asakoさん
    コメントありがとうございます。
    このGoogle画像検索UIスクリプトをご活用いただいているようで
    嬉しく思っております。

    ご質問いただいた件についてですが
    おそらくスクリプト側ではなくて
    CSS側で「.listCover」に対して「width:760px」を
    指定していただければ実現することが可能なのではないかと思っております。

    スクリプト構成上、幅を指定する場合は、
    サムネイルクリック後に展開されるエリアは
    画面めいっぱいすることは厳しく
    指定した幅内で展開されることになります。

    お試しください。
    よろしくお願いします。

  • asako | 2013.12.04 0:49

    ご回答ありがとうございました!出来ました!!

    でも、実は幅の指定はなくても大丈夫だったみたいで、
    Dreamweaverでソースコードのフォーマットをした際に
    li のコメントアウト位置がずれてしまっていたのが原因でした・・・。

    凡ミスでお騒がせして本当に申し訳ありませんでした。
    このような質問にも親切にお答えいただき、感謝しています。

    こちらのスクリプトは、今回のように固定幅にも組み込めるし、
    展開部分のレイアウトも自由に出来るので、とても使いやすいですね。

    他のサンプルも、いつも丁寧な解説付きで掲載してくださっているので
    私のような超初心者でも分かり易くてすごくありがたいです。

    どうもありがとうございました!!!

  • asako | 2013.12.27 14:01

    お世話になります。この間は、ご親切に回答いただきありがとうございました。

    またひとつお伺いしたいことが出てきまして。。

    詳細エリア「.expandField」の高さを自動にすることは出来ますでしょうか?
    詳細エリアに入るテキストの量によって自動で高さが変化するようにしたいと思っているのですが…。

    もし可能であれば教えていただけると幸いです。
    どうぞよろしくお願いいたします。

  • BlackFlag | 2013.12.31 12:40

    >asakoさん
    コメントありがとうございます。
    いろいろとGoogle画像検索UIスクリプトを使ってお試しいただいている様で
    嬉しく思っております。

    高さを可変にする件についてですが
    現状のスクリプト構成だと少々厳しく思っておりますが
    expandHeightのところを「expandHeight = ’100%’」とすることで
    展開時のスライドアニメーションは動きませんが
    フェード展開にて実装できるかと思います。
    (この先、高さ可変のパターンを作る機会が出来ましたら
    ここでも紹介させていただきます。)

    お試しください。
    よろしくお願いします。

  • asako | 2014.01.03 1:20

    年末のお忙しい中、ご回答いただきありがとうございました!
    教えていただいた通り、’100%’で可変にできました!!ありがとうございます。
    展開時はスライドがないですが、閉じる時はスライド動きますし、
    この設定を使用させていただきたいと思います。

    今年も、こちらの記事を参考に色々と勉強させていただきたいと思います。
    これからも期待しております!

  • taiki | 2014.02.12 2:10

    はじめまして。Google画像検索の様なUIを使わさせていただいています。
    実装の手順も大変わかりやすく説明されていて簡単に実装できました!
    ありがとうございます。

    一つお伺いさせて頂きたいのですが、レスポンシブで使う際スマホ用にlistBaseWidthの幅をPC用とは別サイズで指定したいのですが、
    どういった方法がありますでしょうか?
    最終的にはPCの画面ではウィンドウ幅に応じて横に3~4枚、スマホでは横に2枚画像を表示させたいと思っています。
    .listitemのwidthに50%を指定したりいろいろ試してみたのですが自分の知識不足でこれといった成果を得られませんでした(笑)

    もしよろしければお答えいただけると嬉しいです。
    よろしくお願いいたします。

  • BlackFlag | 2014.02.16 10:41

    >taikiさん
    コメントありがとうございます。
    このGoogle画像検索UIスクリプトをご活用いただいている様で
    嬉しく思っております。

    ご質問頂きました件についてですが
    スマホのみサイズを変更させる場合は
    当ブログ別記事の
    ————————————————-
    ・Androidでモバイルとタブレット(+iPhone/iPad)を振り分ける方法
    http://black-flag.net/javascript/20130213-4472.html
    ————————————————-
    この様な判別処理を使って
    当記事のGoogle画像検索UIスクリプトの
    15行目辺りで「listBaseWidth」の値を
    再度入れ直す(スマホのみ値を上書きさせる)やり方で
    可能になるのではないかと思っております。

    お試しください。
    よろしくお願いします。

  • taiki | 2014.02.17 22:55

    貴重なお時間を割いてお答えいただき大変ありがとうございます!

    そちらの記事を参考に制作していきたいとおもいます。

    ご返答いただき本当にありがとうございました。

    今後共、参考にさせていただき勉強したいとおもいます!

  • shiba | 2014.02.20 20:25

    ネット上を散々探しまわってたどり着きました。
    まさに探し求めていたものです!感謝に堪えません・・!

    贅沢な悩みですが、1つだけ質問させてください。
    展開させたボックス内に配置した要素(画像やテキスト)にモーダルウィンドウ等のjsを設定しても上手く動作しません。
    これは仕様上致し方ないのでしょうか?

    ご回答が頂ければ幸いです。
    よろしくお願い致します。

  • BlackFlag | 2014.02.23 11:38

    >shibaさん
    コメントありがとうございます。
    このGoogle画像検索UIスクリプトをご活用いただいている様で
    嬉しく思っております。

    モーダルウィンドウとの併用についてですが
    展開後の枠の中でモーダルウィンドウを実装させることは可能です。

    それぞれのスクリプトを実行させるタイミングの問題かと思われますが
    使用するモーダルウィンドウのプラグインやスクリプト構成によって
    調整を必要とする箇所が変わってくるかと思われます。

    モーダルウィンドウを実行させるスクリプトを
    ・このGoogleUIスクリプトの後で読み込む
    ・モーダル用実行メソッドを「.click()」を使うのではなく「.on」を使う
    ・このGoogleUIスクリプトの96行目と97行目の間にモーダル用実行スクリプトを記述する
    などが調整方法として想定できるところかと思っております。

    お試しください。
    よろしくお願いします。

  • shiba | 2014.02.25 12:32

    丁寧なご回答、ご教授ありがとうございました。
    早速試してみたいと思います。

    稚拙な知識と技術しか無い自分にとっては本当にありがたいです。
    今後も参考、勉強させていただきます。
    多謝!!

  • mar | 2014.03.30 8:24

    はじめまして。
    とても素敵なサンプルで、大変ありがたく使わせていただいております!!

    ひとつ質問なのですが、ダイレクトリンクで開く方法を教えて頂ければと思っています。
    どうぞ宜しくお願い致します。

  • BlackFlag | 2014.03.30 22:46

    >marさん
    コメントありがとうございます。
    このGoogle画像検索UIスクリプトをご活用いただいているようで
    とても嬉しく思っております。

    ご質問いただきました別ページからのリンクで
    展開位置を指定する件についてですが
    リンクされるURLに対して、アドレスの後に何番目の画像を開くか判断させる
    アンカーリンク的な「#n」を付ける形ならば可能かと思います。

    【例】—————————————————————————
    http://○○○○○.html#5
    ————————————————————————————
    ※5番目の画像を開く為のURL

    そして、Google画像検索UIスクリプトを実装するページに
    以下の内容を追加します。

    ————————————————————————————
    var url = document.URL;
    if(url.indexOf(‘#’)){
    var numSplit = ((url.split(‘#’)[1])-1);
    $(‘.listItem’).eq(numSplit).click();
    }
    ————————————————————————————
    飛んできたURLの「#」のついた番号を判別して
    その番号の画像をクリックさせます。

    この方法でならば実現可能かと思っております。

    お試しください。
    ご確認よろしくお願いします。

  • natsu | 2014.08.28 18:05

    はじめまして、
    大変ありがたく使わせていただいております!!

    質問なのですが、こちらjqueryを1.11にしたところ動かなくなってしまったのですが、1.9となにが違うのでしょうか?
    どうぞ宜しくお願い致します。

  • BlackFlag | 2014.08.29 0:43

    >natsuさん
    コメントありがとうございます。
    当記事のGoogle画像検索UIスクリプトをお試しいただいている様で
    嬉しく思っております。

    jQueryのバージョンについて確認してみましたが
    サンプルファイルをjQuery1.11に変更しても
    動作には影響しませんでしたが
    当記事からダウンロードできるサンプルファイルでも
    同じ現象が起こっていますでしょうか。

    なにか他のスクリプトと併用して実装されているような場合は
    そちらのスクリプトの内容もご確認いただければと思っております。

    よろしくお願いします。

  • natsu | 2014.09.04 16:20

    BlackFlagさん
    返信ありがとうございます!読み込む順番がおかしかったようです。すいません、無事動きました!

    別のことでお伺いしたいのですが、
    wordpressの中で下記のようにwhileをつかって繰り返すように配置しているのですが、
    一番上のしか動作せず他はクリックしても反応しないのですが、どこを修正すれば同一ページ内で同じものが動くでしょうか?すいませんが、よろしくおねがいします。

  • BlackFlag | 2014.09.07 13:09

    >natsuさん
    無事に問題なく動作したようで安心致しました。

    複数設置については
    サンプルHTMLファイル上で要素を増やしていただければ分かると思いますが
    スクリプト動作自体は動作します。

    whileを使ったとして、
    HTMLソースがきちんと生成された後に
    スクリプトが実行させるように調整すれば
    動作するのではないでしょうか。

    サンプルファイルを使ってもろもろ動作するか確認してから
    WordPress等に実装するようにしてみてください。

    お試しください。
    よろしくお願いします。

  • CARLOS | 2014.10.09 18:21

    始めましてカルロスと申します。

    の中にTABS入れたいですが、なかなかできなくてどしたらいかわかりません(--)
    、もしかしてできないのかな、何かeventブロックされているのかな?助けてください、変な日本語ですみません、よろしくお願いします。

  • BlackFlag | 2014.10.10 0:25

    >CARLOSさん
    コメントありがとうございます。
    当記事のGoogle画像検索UIスクリプトをお試しいただいている様で
    嬉しく思っております。

    コメント内にHTMLタグを直接書き込むと正常に表示されなくなってしまうので
    記載された内容が判断できなくなってしまいます。

    HTMLタグを直書きせずに記載してください。

    よろしくお願いします。

  • Jun | 2015.01.05 17:57

    はじめまして。Google画像検索の様なUIを使わさせていただいています。

    質問なのですが、サムネイルをクリックすると下に表示される詳細エリアの中では、他のjQuery(smartRollover.jsや、jquery.adaptive-backgrounds.js等)を使うことはできますか?
    詳細エリアの中だけは、上記smartRollover.js、jquery.adaptive-backgrounds.js等のjQueryが反映されず、原因が分からないでいます。

    お忙しいところ恐れ入りますが、解決方法がありましたら、ご教示頂けませんでしょうか。
    何卒よろしくお願いします。

  • BlackFlag | 2015.01.07 1:29

    >Junさん
    コメントありがとうございます。
    当記事のGoogle画像検索UIスクリプトをご活用いただいている様で
    嬉しく思っております。

    他のプラグインとの併用についてですが
    展開後の枠の中でも実装させることは可能です。

    それぞれのスクリプトを実行させるタイミングの問題かと思われますが
    使用するプラグインのスクリプト構成によって
    調整を必要とする箇所が変わってくるかと思われます。

    他のプラグインを実行させるスクリプトを
    ・このGoogleUIスクリプトの後で読み込む
    ・実行メソッドを「.click()」を使うのではなく「.on」を使う
    ・このGoogleUIスクリプトの96行目と97行目の間(findItem.click内)に実行スクリプトを記述する
    などが調整方法として想定できるところかと思っております。

    お試しください。
    よろしくお願いします。

  • YOUTA | 2015.04.13 17:32

    「Google画像検索の様なUI」ありがたく使わせていただいてます。
    シンプルで使いやすいサンプルなのでとても助かっています。
    使いやすいだけにちょっと手を加えて自分好みに改良したいと思っているのですが、
    動的に追加した要素へ適用させる場合にはどうのようにすれば良いのでしょうか?
    初心者なりに調べてみると、後から追加した要素へイベントを適用させるには
    .clickではなく.onを使えとあったので、23行目のクリックイベントを下記のように
    変更してみたのですが、追加した要素にはイベントが発生せず展開されませんでした。

    findItem.click(function(){
         ↓
    findItem.on(‘click’,function(){

    ちなみに動的に追加した要素というのは、画面移管なしで次ページを読み込める
    autopager(https://code.google.com/p/jquery-autopager/)を使っています。
    単純にclickイベントをonイベントに変更するだけでは動かないのでしょうか?
    解決方法がございましたらお教えいただけませんか?
    よろしくお願いいたします。

  • BlackFlag | 2015.04.18 20:22

    >YOUTAさん
    コメントありがとうございます。
    当記事のGoogle画像検索UIスクリプトをご検討いただいている様で
    嬉しく思っております。

    ご質問いただきました件についてですが
    おそらく次ページを読み込んだ際に
    当記事のスクリプトが実行されていない影響
    (次ページのデータがスクリプト実行の対象になっていない)だと思われますので
    当スクリプト全体を適宜関数で囲んだりして、
    次ページが読み込まれた際に再度スクリプトを読み込み(実行)し直すようにすれば
    解消されるのではないかと思っております。

    お試しください。
    よろしくお願いします。

  • YOUTA | 2015.04.20 15:45

    回答ありがとうございます。
    スクリプトの読み込む順序やAjax時の挙動がどうにもよくわかりませんでした。
    教えていただいたとおりGoogle画像検索UIスクリプト自体を関数で囲み、その都度実行するように書き換えてみようと思います。
    なにぶん素人なのでちょっと時間がかかりそうですが、これでなんとかなりそうです。
    本当にありがとうございました!

  • けん | 2015.05.21 11:48

    けんと申します。

    いつもご丁寧に教えていただき、とても感謝しております。
    先日、スクロールしたらフッターが表示されるという件について、ご質問させていただいて、サンプルをご検討されているとのご回答、誠にありがとうございました。
    たのしみにお待ちしております。

    すみません、今回も質問なのですが、当記事の「Google画像検索の様なUI」を使わせて頂きたく、さっそく記事通りに行ったのですが、サムネイム時に画面右側だけが空白が空いてしまいます。
    サムネイム画像表示の画像サイズも同じように120pxで表示させていますが、表示されている画像の数を数えると9枚しか表示されていなく、こちら様の記事のサンプルページにございますように、10枚にならないのです。(一枚分空白が空いてしまっている状態)

    度々申し訳ございませんが、こちら様の記事の様にサムネイム画像を画面ピッタリ横10枚にするにはどこをどのように変更すればよろしいのでしょうか?

    お忙しいところすみませんが、何卒よろしくお願いいたします。

  • BlackFlag | 2015.05.26 1:22

    >けんさん
    コメントありがとうございます。
    こちらのスクリプトもお試しいただいているようで
    嬉しく思っております。

    ご質問いただいた件についてですが
    以前の質問でもお答えしたとおり…
    実際に組み込まれているページを確認させていただけない限り
    どこがおかしいのかはこちらでは判断ができないのですが
    実装されているHTML、CSS、スクリプトと当記事のサンプルデータで
    どの部分が違っているかを見比べてみていただければと思います。

    一つ考えられる点としては
    当サンプルの構成ではHTML側の</li>の後ろに単純な改行を入れると
    半角スペースとみなされサムネイルの右側に余白が発生してしまうので
    改行をコメントアウトで消しています。(本文にも解説を入れてありますが…)

    その部分含め各ファイルをご確認いただければと思っております。
    よろしくお願いします。







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

jQueryでGoogle画像検索の様なUIを実装する実験(レスポンシブ対応)

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner