Convierta esta devolución de llamada JSON de Facebook para capturar imágenes en el directorio

Facebook requires access tokens now to access public photos. I cannot build an app to deal with this, but I have 50+ galleries on a website that have broken and I'm trying to find the least painful solution.

Assuming I have all my images for a given album in a directory on my own server, can I modify this code to grab my images and throw each one into a list tag? Basically get images in a given directory from my server instead of Facebook and build out the list.

$.getJSON('//graph.facebook.com/ALBUM_ID/photos?callback=?', function (json) {
    $.each(json.data, function () {
        $('<li></li>')
            .append('<span class="thumb" style="background: url(' + this.images[1].source + ') center no-repeat; background-size: 140%;"><a href=' + this.images[0].source + ' rel="gallery"></a></span>')
            .appendTo('#album-gallery');
    });
});

preguntado el 05 de mayo de 13 a las 21:05

What file names are you giving to your photos on your server? How will your client know which photos to show? What server side language are you using? You are not able to traverse the directory on the client; your server will have to les digas the client which files are available. -

I am not knowledgeable enough to answer your questions. All I know is if I have a directory with image_01.jpg through image_20.jpg or whatever, I would like it to return this in the html: <li>image_01.jpg</li> <li>image_02.jpg</li> <li>image_03.jpg</li> -

1 Respuestas

De tus comentarios, you can add the images 01.jpg a 20.jpg programmatically, simply using a loop;

for (var i=1;i<=20;i++) {
    var url = '/pathToYourFolder/image_' + (i < 10 ? '0' : '') + i + '.jpg';

    $('<li></li>')
        .append('<span class="thumb" style="background: url(' + url + ') center no-repeat; background-size: 140%;"><a href=' + url + ' rel="gallery"></a></span>')
        .appendTo('#album-gallery');
}

Note that we've substituted the URL's you were adding before to the images with our own construction of url. You'll need to change /pathToYourFolder/ with the name of the folder your're now storing your images in.

If you then decide you want images 1- 30, or 5- 10, you just need to change the ranges of the for lazo.


para abordar su comentarios sobre esta respuesta;

  1. You can avoid having to insert the script at the bottom of the page by wrapping it in a $(document).ready() bloquear.

  2. If you have a number of file names, you can store them in an array, and iterate over them like so;

    var names = ['anything.jpg', 'foo.jpg', 'bar.jpg', 'baz.jpg'];
    
    for (var i=0;i<names.length;i++) {
        var url = '/pathToYourFolder/' + names[i];
    
        $('<li></li>')
            .append('<span class="thumb" style="background: url(' + url + ') center no-repeat; background-size: 140%;"><a href=' + url + ' rel="gallery"></a></span>')
            .appendTo('#album-gallery');
    }
    

Combinado con el $(document).ready(), this would give you;

$(document).ready(function () {
    var names = ['anything.jpg', 'foo.jpg', 'bar.jpg', 'baz.jpg'];

    for (var i=0;i<names.length;i++) {
        var url = '/pathToYourFolder/' + names[i];

        $('<li></li>')
            .append('<span class="thumb" style="background: url(' + url + ') center no-repeat; background-size: 140%;"><a href=' + url + ' rel="gallery"></a></span>')
            .appendTo('#album-gallery');
    }
});

contestado el 23 de mayo de 17 a las 13:05

Thank you so much. That worked! I had to put the script at the bottom of the page before the </body> to get it to work. Is there an easy variation that would use 'any' image, no matter what the file was named... like 'anything' + .jpg ? - kirk ross

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.