NivoLightbox

		$.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": 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><a href="' + f["url_m"] + '" data-lightbox-gallery="gallery1" title="' + f["title"] + '"><img src="' + f["url_m"] + '" /></a></li>';
				}
				$('#box-container').html(html);
				$('#box-container').imagesLoaded(function() {
					$('#box-container').masonry({
						itemSelector: 'li',
						transitionDuration: '0.3s'
					});
				});
				$('#box-container .item a').nivoLightbox({
					effect: 'fadeScale',                             // The effect to use when showing the lightbox
					theme: 'default',                           // The lightbox theme to use
					keyboardNav: true,                          // Enable/Disable keyboard navigation (left/right/escape)
					clickOverlayToClose: true,                  // If false clicking the "close" button will be the only way to close the lightbox
					onInit: function(){},                       // Callback when lightbox has loaded
					beforeShowLightbox: function(){},           // Callback before the lightbox is shown
					afterShowLightbox: function(lightbox){},    // Callback after the lightbox is shown
					beforeHideLightbox: function(){},           // Callback before the lightbox is hidden
					afterHideLightbox: function(){},            // Callback after the lightbox is hidden
					onPrev: function(element){},                // Callback when the lightbox gallery goes to previous item
					onNext: function(element){},                // Callback when the lightbox gallery goes to next item
					errorMessage: 'The requested content cannot be loaded. Please try again later.' // Error message when content can't be loaded
				});
			});	
			
		   	
	<ul id="box-container"></ul>
		
ページトップへ戻る