GoogleImgSearch UI

$(window).load(function(){flickr();setTimeout(function(){listAdjust();},200); SyntaxHighlighter.all(); }); // for IE8
$(window).resize(function(){listAdjust();}).resize();
	
function flickr() {
    $.getJSON('https://api.flickr.com/services/rest/?format=json&jsoncallback=?', {
//この部分は必ずご自身のapi_keyと入れ替えてください。       "api_key": "2a05b6c699c389659c467768e7e03439", 
	"api_key": "cc33804f6624eaea05252740e5972e95",
        "method": "flickr.photos.search", //写真検索
        "text": "Bar+Refaeli", //検索語
        "sort": "relevance", //並べ替え relevanceは関連度の高い順
        "extras": "url_m", //写真サイズ
        "per_page": 60, //取得件数
        "page": 1, //ページ番号
    }).done(function(data) {
		var html = '';
		var photo = '';
        for (var i = 0; i < data.photos.photo.length; i++) {
            var f = data.photos.photo[i];
			html += '<li><img class="thumb" src="' + f["url_m"] + '" title="' + f["title"] + '" /><div class="selfRep"><div class="selfRepInner"><div class="secLeft"><img class="image" src="' + f["url_m"] + '" /></div><div class="secRight"><p>' + f["title"] + '</p></div></div></div></li>';
		}
		$('.listCover').html(html);
		$('.selfRep').hide();
		
	var setList = $('.listCover'),
	setItem = $('li'),
	setReplace = $('.selfRep'),
	listBaseWidth = 130,
	thumbOpacity = 0.8,
	expandHeight = 450,
	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)});
		}
	});
	});
}		
			

<ul class="listCover"></ul><!--/.listCover-->