J'ai un div qui contient un certain nombre d'images Instagram, produites par le plugin instafeed.js. Après avoir exécuté le plugin, le HTML résultant ressemble à ceci:

<div id="instafeed">
    <a><img /></a>
    <a><img /></a>
    <a><img /></a>
    etc...
</div>

J'essaye de trouver un moyen de charger le contenu de ce div dans un tableau; Je pense que le moyen le plus simple serait de simplement prendre les balises, ce qui est bien.

Je suis assez inexpérimenté avec JS et jQuery, c'est pourquoi j'ai du mal à y parvenir et je n'ai pas été en mesure de trouver des messages de forum qui font tout ce que j'espère réaliser.

Jusqu'à présent, tout ce que j'essaie de faire est de charger le contenu du div dans un tableau et de le réimprimer dans le document, ce qui devrait (dans mon esprit de toute façon) ajouter les balises dans le HTML. J'essaie à la fois avec JavaScript et jQuery et j'ai peu de succès avec l'un ou l'autre. J'apprécierais toutes vos pensées:

JS:

var containerDiv = document.getElementById('instafeed');
var pics = containerDiv.getElementsByTagName('img');

console.log(pics); //Tells me at least that I have an array of img

for (var i = 0; i < pics.length; i++) {
    document.write(pics[i]);
} //Seemingly does nothing

JQuery: (je suis vraiment désolé si ce code est tout simplement faux, je ne connais vraiment pas très bien jQuery du tout)

$(document).ready(function() {
    var pics = [];

    $('#instafeed').find('img').each(function() {
        pics.push($(this));
    });

    for (i = 0; i < pics.length; i++) {
        console.log(pics[i]);
    }

});

Toutes les pensées, astuces ou conseils seraient très appréciés.

Edit: Juste pour ajouter un peu de contexte à mon problème, pour éviter de causer plus de confusion.

J'essaie de tirer quatre images aléatoires d'un flux Instagram spécifique à l'utilisateur pour les afficher sur un site Web. instafeed.js ne peut extraire que quatre images et il peut randomiser les images, mais Instagram lui-même envoie toujours les quatre images les plus récentes, de sorte que le plugin ne fait que randomiser l'ordre des quatre mêmes images à chaque fois.

J'essaie de laisser le plugin envoyer chaque image, qui ira dans l'instafeed div. À partir de là, je souhaite charger toutes les images contenues dans un tableau afin de pouvoir choisir au hasard quatre images à afficher sur le site.

0
lordchancellor 14 juil. 2015 à 14:16

2 réponses

Meilleure réponse

Le code JQuery que vous écrivez est correct. Seulement vous avez besoin du div où vous devez placer les images.

$(document).ready(function() {
   var pics = [];

   $('#instafeed').find('img').each(function() {
      pics.push($(this));
   });

   for (i = 0; i < pics.length; i++) {
      $('div#yourDiv').append(pics[i]);
   }  

});

Voir la ligne du for()

Vous pouvez extraire uniquement le SRC des images et ensuite faire comme vous le souhaitez

   $('#instafeed').find('img').each(function() {
      pics.push($(this).attr('src'));
   });
   console.log(pics); // returns an array of src.
0
Marcos Pérez Gude 14 juil. 2015 à 11:21

Merci à tous ceux qui ont essayé de m'aider avec ça. Il s'avère que le problème que j'avais provenait de ma requête tentant de s'exécuter avant qu'instafeed.js n'ait pu extraire les images d'Instagram, et il n'y avait donc rien à trouver dans la div. J'ai réussi à résoudre ce problème avec un setTimeout.

Pour tous ceux qui sont intéressés, et juste au cas où quelqu'un d'autre pourrait rencontrer cela à l'avenir avec un problème similaire, voici mon code complet (c'est un peu inélégant, j'en suis sûr, mais je suis toujours un novice relatif chez JS.)

function snagImages() {
    var pics = [];

    $('div#instafeed').find('img').each(function() {
        pics.push($(this).attr('src'));
    });

    reduceGallery(4, pics);
}

function reduceGallery(limit, pics) {
    if (limit === undefined) {
        limit = 4;
    }

    var gallery = [];

    while (gallery.length < limit) {
        var j = Math.floor(Math.random() * pics.length);

        if ( gallery.indexOf(pics[j]) > -1) {
            continue;
        } 

        gallery.push(pics[j]);
    }

    displayPics(gallery);
}

function displayPics(gallery) {
    for (var i = 0; i < gallery.length; i++) {
        document.getElementById('gallery').innerHTML += '<a href="' + gallery[i] + '" title="Gallery Image">' + '<img src="' + gallery[i] + '" alt="Gallery Image" />' + '</a>';
    }
}

var userFeed = new Instafeed( {
    options
});
userFeed.run();

setTimeout(function() { snagImages() }, 500);
0
lordchancellor 15 juil. 2015 à 10:34