I have found a plugin called Photobox that I am dying to implement on my site. It's an image gallery and it can be found at this link http://codepen.io/vsync/pen/upeBw
The only problem is that the current JScript calls photos through the wrong Flickr API.
I've tried to change the used API method which returns the most interesting photos for the most recent day (flickr.interestingness.getList) to an API method that returns the photos in one of my photo sets (flickr.photosets.getPhotos) using my own API key but I can't seem to make it work.
This is the best gallery I've seen outh there and I would really like to make it work for my site. Please help me do that.
This is the code:
!(function(){ 'use strict';
var numOfImages = window.location.search ? parseInt(window.location.search.match(/\d+$/)[0]) : 70,
gallery = $('#gallery'),
videos = [
];
$.ajax({
url: 'http://api.flickr.com/services/rest/',
data: {
format: 'json',
method: 'flickr.interestingness.getList',
per_page : numOfImages,
api_key: 'b51d3a7c3988ba6052e25cb152aecba2'
},
dataType: 'jsonp',
jsonp: 'jsoncallback'
})
.done(function (data){
var loadedIndex = 1, isVideo;
data.photos.photo = data.photos.photo.concat(videos);
$.each( data.photos.photo, function(index, photo){
isVideo = photo.thumb ? true : false;
var url = 'http://farm' + photo.farm + '.static.flickr.com/' + photo.server + '/' + photo.id + '_' + photo.secret,
img = document.createElement('img');
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'
}
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;
});
$('#gallery').photobox('a', { thumbs:true }, callback);
setTimeout(window._photobox.history.load, 1000);
function callback(){
console.log('callback for loaded content:', this);
};
});
})();