Question

I am using jQuery-Image-Gallery jQuery plugin. It is a full-screen jQuery photo gallery. I downloaded it and is working fine in its demo. It loads images using an ajax request to flickr. It is as follows;

$.ajax({
    url: 'http://api.flickr.com/services/rest/',
    data: {
        format: 'json',
        method: 'flickr.interestingness.getList',
        api_key: '7617adae70159d09ba78cfec73c13be3'
    },
 dataType: 'jsonp',
    jsonp: 'jsoncallback'
}).done(function (data) {
    var gallery = $('#gallery'),
        url;
    $.each(data.photos.photo, function (index, photo) {
        url = 'http://farm' + photo.farm + '.static.flickr.com/' +
            photo.server + '/' + photo.id + '_' + photo.secret;
        $('<a rel="gallery"/>')
            .append($('<img>').prop('src', url + '_s.jpg'))
            .prop('href', url + '_b.jpg')
            .prop('title', photo.title)
            .appendTo(gallery);
    });
});

This is working perfect. But I want to display my local files (in my localhost / server) in the images/photos folder. I have PHP server. How can I do this?

I would like to know the Ajax JSON call back structure so that we can artificially recreate it using a custom PHP file.

Answer 1

$.ajax({
            type: 'POST',
            url: 'ajax.php',
            dataType: 'json',
            cache: false,
            success: function(result) {
                $.each(result, function(key,val){


var gallery = $('#gallery'), url;
            url = val;
            $('<a rel="gallery"/>')
                .append($('<img>').prop('src', 'images/thumbs/' + url))
                .prop('href', 'images/photos/' + url)
                .prop('title', url)
                .appendTo(gallery);

                });
           },
    });