Lightbox2 inside Bootstrap Image Gallery

    // Load demo images from flickr:
    $.getJSON('https://api.flickr.com/services/rest/?format=json&jsoncallback=?', {
		"api_key": "cc33804f6624eaea05252740e5972e95",
        "method": "flickr.photos.search", //写真検索
        "text": "Jennifer+Lopez", //検索語
        "sort": "relevance", //並べ替え relevanceは関連度の高い順
        "extras": "url_m", //写真サイズ
        "per_page": 61, //取得件数
        "page": 1, //ページ番号
    }).done(function (result) {
        var linksContainer = $('#links'),
            baseUrl;
        // Add the demo images as links with thumbnails to the page:
        $.each(result.photos.photo, function (index, photo) {
            baseUrl = 'http://farm' + photo.farm + '.static.flickr.com/' +
                photo.server + '/' + photo.id + '_' + photo.secret;
            $('<a/>')
                .append($('').prop('src', baseUrl + '_s.jpg'))
                .prop('href', baseUrl + '_b.jpg')
                .prop('title', photo.title)
                .attr('data-lightbox', 'lightbox')
                .appendTo(linksContainer);
        });
    });
			
    	<div id="links"></div>

		<div id="blueimp-gallery" class="blueimp-gallery">
    <!-- The container for the modal slides -->
    		<div class="slides"></div>
		</div>
			
ページトップへ戻る