'use strict';
var numOfImages = window.location.search ? parseInt(window.location.search.match(/\d+$/)[0]) : 70,
gallery = $('#gallery');
// Get some photos from Flickr for the demo
$.ajax({
url: 'https://api.flickr.com/services/rest/?format=json&jsoncallback=?',
data: {
format: 'json',
method: "flickr.photos.search",
text: "Candice+Swanepoel",
per_page: 60,
page:1,
extras: "url_m",
sort: "relevance",
api_key: "cc33804f6624eaea05252740e5972e95", // this is my own API key, please use yours
},
dataType: 'jsonp',
jsonp: 'jsoncallback'
})
.done(function (data){
var loadedIndex = 1, isVideo;
$.each( data.photos.photo, function(index, photo){
isVideo = photo.thumb ? true : false;
// http://www.flickr.com/services/api/misc.urls.html
var url = 'http://farm' + photo.farm + '.static.flickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret,
img = document.createElement('img');
// lazy show the photos one by one
img.onload = function(e){
img.onload = null;
var link = document.createElement('a'),
li = document.createElement('li');
link.href = this.largeUrl;
link.appendChild(this);
if( this.isVideo ){
link.rel = 'video';
li.className = 'video'
} else {
li.appendChild(link);
}
gallery[0].appendChild(li);
setTimeout( function(){
$(li).addClass('loaded');
}, 25*loadedIndex++);
};
img['largeUrl'] = isVideo ? photo.url : url + '_b.jpg';
img['isVideo'] = isVideo;
img.src = isVideo ? photo.thumb : url + '_t.jpg';
img.title = photo.title;
});
// finally, initialize photobox on all retrieved images
$('#gallery').photobox('a', { thumbs:true, loop:false }, callback);
// using setTimeout to make sure all images were in the DOM, before the history.load() function is looking them up to match the url hash
setTimeout(window._photobox.history.load, 2000);
function callback(){
console.log('callback for loaded content:', this);
};
});
