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 Photobox - CodePen

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 = [
// Get some photos from Flickr for the demo
    url: 'http://api.flickr.com/services/rest/',
    data: {
        format: 'json',
        method: 'flickr.interestingness.getList',
        per_page : numOfImages,
        api_key: 'b51d3a7c3988ba6052e25cb152aecba2' // this is my own API key, please use yours
    dataType: 'jsonp',
    jsonp: 'jsoncallback'
.done(function (data){
    var loadedIndex = 1, isVideo;
    // add the videos to the collection
    data.photos.photo = data.photos.photo.concat(videos);
    $.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;
            if( this.isVideo ){
                link.rel = 'video';
                li.className = 'video'
            setTimeout( function(){ 
            }, 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 }, 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, 1000);
    function callback(){
        console.log('callback for loaded content:', this);