Bilder für Fotoswip Gallery laden

Question

Also habe ich eine Reihe von Bildern, die ich mit Photoswipe in eine Galerie laden möchte, aber ich habe Probleme beim Festlegen der Bildbreite und -höhe. Genauer gesagt, ich glaube, ich brauche die Bilder

Hier ist meine JS vorzuladen zum Rendern der Seite, hier bin ich Dias und Auflistung als lokale Variable für die ejs Seite definieren, zu verwenden:

var sizeOf = require('image-size'); 
 
    var url = require('url'); 
 
    var http = require('http'); 
 

 
    var slideshow = []; 
 

 
    for(var i = 0; i < listing.listing_images.length; i++) { 
 
     var image = listing.listing_images[i]; 
 
     var width, height = 0; 
 
     var imgUrl = image.url; 
 
     var options = url.parse(imgUrl); 
 

 
     http.get(options, function (response) { 
 
      var chunks = []; 
 
      response.on('data', function (chunk) { 
 
       chunks.push(chunk); 
 
      }).on('end', function() { 
 
       var buffer = Buffer.concat(chunks); 
 
       **height = sizeOf(buffer).height; 
 
       width = sizeOf(buffer).width;** 
 
      }); 
 
     }); 
 
     var item = { 
 
      src: image.url, 
 
      h: height, 
 
      w: width 
 
     }; 
 

 

 
     slideshow.push(item); 
 
    } 
 

 

 
    res.render('example.ejs', { 
 
     listing: listing, 
 
     slides: slideshow 
 
    });

Und hier ist das Skript in der ejs Seite:

<% var slides = locals.slides %> 
 
<script> 
 
$('document').ready(function() { 
 
    var pswpElement = document.querySelectorAll('.pswp')[0]; 
 

 
    // build items array using slideshow variable 
 
    var items = <%- JSON.stringify(slides) %>; 
 
    console.log(items); 
 

 
    // grab image 
 

 
    if (items.length > 0) { 
 
     // define options (if needed) 
 
     var options = { 
 
      // optionName: 'option value' 
 
      // for example: 
 
      index: 0 // start at first slide 
 
     }; 
 

 
     // Initializes and opens PhotoSwipe 
 
     var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options); 
 
     gallery.init(); 
 

 
    } 
 

 
</script>

Grundsätzlich ist das Array von photoswipe Elemente wird in Ordnung übergeben, aber die Breite und Höhe werden nicht festgelegt, bis photoswipe initialisiert und das img geladen wird. Die Bilder werden also nicht angezeigt, da ihre Höhe und Breite noch nicht festgelegt sind.

Gibt es eine Möglichkeit, das Laden der Bilder im Diashow-Array auszulösen, so dass die Breite & Höhe vor dem Übergeben an Photoswipe festgelegt werden? Ich habe auch versucht zu sehen, ob ich sie zunächst auf 0 setzen konnte, und versuchen Sie später, die Höhe und Breite zu aktualisieren und versuchen, Photoswipe neu laden, aber Photoswipe erkennt die neue Höhe/Breite des Bildes nicht.

Tut mir leid, wenn etwas davon unklar/durcheinander mit ejs Unsinn ist, fühlen Sie sich frei, etwas zu fragen, und ich würde gerne klären.

Dank

Answer 1

diese Nutzung der API Lösung Ended up:

gallery.listen('gettingData', function(index, item) { 
     // index - index of a slide that was loaded 
     // item - slide object 
     var img = new Image(); 
     img.src = item.src; 
     item.h = img.height; 
     item.w = img.width; 
    }); 

    gallery.invalidateCurrItems(); 
// updates the content of slides 
    gallery.updateSize(true); 

Wenn jemand dies geschieht lesen werden und es gibt einen besseren Weg, die Bildgröße zu lesen, ohne eine neue img zu erstellen oder diese ich optimieren Liebe Vorschläge. :)