Photoswipe Taille de l'image

Question

J'utilise un site Web de Laravel, y compris Photoswipe. Voici mon problème: Lorsque je clique sur une photo, celle-ci apparaît avec une hauteur et une largeur prédéfinies (dans mon cas 764X480). J'aimerais que mes photos s'ouvrent avec leur ratio d'origine, pas avec un prédéfini (comme j'ai quelques panoramas). Y a-t-il moyen d'arranger ça? Et est-il possible de définir une autre taille? Vous pouvez vérifier le comportement sur http://www.pixelkomando.com/paysages

Merci beaucoup! Vince

Answer 1

Malheureusement, PhotoSwipe n'a pas la possibilité de détecter automatiquement les dimensions de l'image. Ce n'est pas un bug ou une fonctionnalité manquante. C'est la préférence des auteurs, pour le garder petit et propre code javascript pur. Les suggestions de l'auteur sont ici http://photoswipe.com/documentation/faq.html

Vous pouvez essayer ceci. (Source: https://github.com/dimsemenov/PhotoSwipe/issues/796)

var items = [ 
    { src: 'http://........', w:0, h:0 }, 
    { src: 'http://........', w:0, h:0 } 
]; 

var gallery = new PhotoSwipe(.....); 
gallery.listen('gettingData', function(index, item) { 
     if (item.w < 1 || item.h < 1) { // unknown size 
     var img = new Image(); 
     img.onload = function() { // will get size after load 
     item.w = this.width; // set image width 
     item.h = this.height; // set image height 
      gallery.invalidateCurrItems(); // reinit Items 
      gallery.updateSize(true); // reinit Items 
     } 
    img.src = item.src; // let's download image 
    } 
}); 
gallery.init(); 

J'ai personnellement pas testé, mais l'auteur d'approuver type de celui-ci en commentant ci-dessous le code. Il existe d'autres solutions proposées par les développeurs sur leur page github sous l'onglet Problèmes.

vous avez également deux autres options aussi

1. solution Dirtiest. Cela peut suffire pour quelques images mais prendra trop de temps pour attendre init si vous avez quelques dizaines d'images.

Intégrez vos images en taille réelle sur la page. Cela vous donnera accès aux dimensions de l'image sur le chargement de la fenêtre afin que vous puissiez construire votre tableau d'images avec des dimensions réelles, puis init PhotoSwipe.

2. Vous pouvez utiliser les plugins jQuery comme http://imagesloaded.desandro.com/ pour détecter si des images sont chargées ou non. Vous pouvez initialiser PhotoSwipe sur un document prêt en utilisant un espace réservé pour les petites images avec des dimensions comme 100x100. Ensuite, en fonction du processus du plugin, utilisez l'API PhotoSwipe pour mettre à jour les images chargées.

3. Solution la plus avancée. Le plugin imagesloaded dont j'ai parlé plus haut utilise les objets différés de jquery. http://api.jquery.com/category/deferred-object/ vous êtes toujours les bienvenus pour écrire votre propre plugin.

Answer 2

Merci. Je ne suis vraiment pas assez bon dans JS. J'ai trouvé une solution.

J'ai remplacé les lignes suivantes:

// create slide object 
item = { 
    src: linkEl.getAttribute('href'), 
    w: parseInt(size[0], 10), 
    h: parseInt(size[1], 10) 
}; 

par

// create slide object 
item = { 
    src: linkEl.getAttribute('href'), 
    w: parseInt(size[0], 12), 
    h: parseInt(size[1], 12) 
}; 

Mais je dois dire que je ne sais pas ce que et sont pour.

Pour garder le rapport, je ne ai trouvé une astuce CSS:

J'ai ajouté une ligne à photoswipe.css comme ceci:

.pswp img { 
    max-width: none; 
} 

Il est maintenant:

.pswp img { 
    max-width: none; 
    height: auto !important; 
} 

Il ne semble pas être la meilleure façon de le résoudre, mais je le résultat que je avais besoin.