Charger les images suivantes via Ajax et append à Fancybox

Mon problème est que j’ai une grande galerie, qui ne devrait pas être chargée complètement lors du chargement de la première page. Donc, je charge 10 images sur 50 et leur ajoute fancybox. Lorsque l’utilisateur clique sur le bouton suivant, la 11ème image doit être chargée via Ajax et ajoutée au conteneur de galerie.

Le problème est que la fancybox s’arrête à la 10ème image, car elle ne connaît pas les charges dynamics.

Comment puis-je append des images chargées dynamics à fancybox2?

actuellement j’ai ceci:

function loadFancybox() { $('a.lightbox').fancybox({ helpers: { overlay: { css: { 'background': 'rgba(0,0,0,0.8)' } } }, beforeLoad: function() { this.title = $(this.element).data('title'); ajaxGetNextImages(); loadFancybox(); }, loop: false }); } loadFancybox();

ajaxGetNextImages() obtient les images suivantes 🙂

après cela, j’appelle loadFancybox () pour que toutes les nouvelles images appartiennent à la galerie. Mais ils ne sont pas inclus jusqu’à ce que je rouvre fancybox …

OK, juste pour le plaisir et basé sur le commentaire d’ imran-a dans ce numéro de GitHub , voici votre solution piratée:

 $(".fancybox").fancybox({ loop: false, beforeLoad: function () { if ((this.index == this.group.length - 1) && !done) { ajaxGetNextImages(); done = true; this.group.push( { href: "images/04.jpg", type: "image", title: "Picture 04", isDom: false }, { href: "images/05.jpg", type: "image", title: "Picture 05", isDom: false }, { href: "images/06.jpg", type: "image", title: "Picture 06", isDom: false } ); // push } // if } // beforeLoad }); // fancybox

AVIS qu’en dehors d’appeler ajaxGetNextImages() (qui place les nouvelles images dans le stream de documents), je devais insérer (manuellement) les nouvelles images dans le groupe de la fancybox.

N’est pas une solution parfaite mais ça marche, voir DEMO ICI ; vous verrez trois vignettes au chargement de la page. Une fois que vous avez ouvert fancybox et navigué jusqu’au dernier élément, trois autres vignettes seront ajoutées au document, ainsi que les 3 images correspondantes dans la galerie fancybox.

Notez également que vous devez initialiser var done = false; au début de votre script.

BTW, oubliez la fonction loadFancybox() , inutile.

essayez d’appeler .fancybox(); à nouveau après le chargement dynamic des images