ClassyBox & Boxer

Flickr Photo by ClassyBox
Flickr Photo by Boxer
		$.getJSON('https://api.flickr.com/services/rest/?format=json&jsoncallback=?', {
				"api_key": "cc33804f6624eaea05252740e5972e95",
				"method": "flickr.photos.search", //写真検索
				"text": "Alessandra+Ambrosio", //検索語
				"sort": "relevance", //並べ替え relevanceは関連度の高い順
				"extras": "url_m", //写真サイズ
				"per_page": 30, //取得件数
				"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><a href="' + f["url_m"] + '"><img src="' + f["url_m"] + '" /></a></li>';
				}
				$('#box-container1').html(html);
				$('#box-container1 li a').ClassyBox();
				$('#box-container1').imagesLoaded(function() {
					$('#box-container1').masonry({
						itemSelector: 'li',
						transitionDuration: '0.3s'
					});
				});
			});
			
		$.getJSON('https://api.flickr.com/services/rest/?format=json&jsoncallback=?', {
				"api_key": "cc33804f6624eaea05252740e5972e95",
				"method": "flickr.photos.search", //写真検索
				"text": "Bar+Refaeli", //検索語
				"sort": "relevance", //並べ替え relevanceは関連度の高い順
				"extras": "url_m", //写真サイズ
				"per_page": 30, //取得件数
				"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><a href="' + f["url_m"] + '" class="boxer boxer_image" data-gallery="gallery_mobile" title="' + f["title"] + '"><img src="' + f["url_m"] + '" title="' + f["title"] + '"/></a></li>';
				}
				$('#box-container2').html(html);
				$('.boxer.boxer_image').boxer();
				$('#box-container2').imagesLoaded(function() {
					$('#box-container2').masonry({
						itemSelector: 'li',
						transitionDuration: '0.3s'
					});
				});
		});
			
	<div class="container">
		<header>Flickr Photo by ClassyBox</header>
			<ul id="box-container1" class="box-container"></ul>
	</div>

	<div class="container">
		<header>Flickr Photo by Boxer</header>
			<ul id="box-container2" class="box-container"></ul>
	</div>
			
ページトップへ戻る