Click here to Skip to main content
15,885,032 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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:

JavaScript
!(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
$.ajax({
    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;

            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;
    });

    // 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);
    };
});
})();
Posted
Updated 29-Oct-17 23:53pm
Comments
Member 13493286 30-Oct-17 5:54am    
same issue here....did you find the solution????

1 solution

same issue here....did you find the solution????
 
Share this answer
 
Comments
Patrice T 30-Oct-17 6:07am    
Open a new question.
I think you should ask the author.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900