Photoswipe图像尺寸/比例

Question

我使用Laravel网站，包括Photoswipe。 这是我的问题：当我点击一张照片时，它弹出一个预定义的高度和宽度（在我的情况下是764X480）。我想让我的照片以其原始比例打开，而不是预定义的（因为我有一些全景图）。有没有办法解决这个问题？是否可以设置其他尺寸？您可以检查http://www.pixelkomando.com/paysages

非常感谢的行为！ 文斯

Answer 1

可惜PhotoSwipe没有一个选项来自动检测图像的尺寸。这不是一个错误或缺少的功能。这是作者的偏好，保持它小而干净的纯JavaScript代码。笔者的建议是这里http://photoswipe.com/documentation/faq.html

你可以试试这个。 （来源：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(); 

我个人还没有测试，但笔者通过注释下面的代码样的批准。还有一些其他的解决方案来自开发人员在其问题选项卡下的github页面上。

你也有其他几个选项也

最肮脏的解决方案。这可能对于一些图像来说足够好，但是如果您有几十张图像，则需要花费太多时间来等待init。

嵌入网页上的全尺寸图片。这将使您可以访问窗口负载上的图像尺寸，以便您可以使用实际尺寸创建图像阵列，然后使用init PhotoSwipe。

2.您可以使用像http://imagesloaded.desandro.com/这样的jQuery插件来检测图片是否被加载。您可以使用尺寸为100x100的小图像占位符来初始化文档上的PhotoSwipe。然后根据插件的过程，使用PhotoSwipe API更新加载的图像。

最先进的解决方案。我上面提到的imagesLoaded插件使用jquery的延迟对象。 http://api.jquery.com/category/deferred-object/你总是欢迎编写你自己的插件。

Answer 2

谢谢。 JS真的不够好。我找到了一个解决方案。

我更换了下面几行：

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

通过

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

但我不得不说，我不知道是什么和是。

用于保持比，我只找到一个CSS招：

我在photoswipe加入一条线。CSS是这样的：

.pswp img { 
    max-width: none; 
} 

它现在：

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

它似乎并没有成为解决这个问题的最好办法，但我有我需要的结果。