Photoswipe 图片 size/ratio

Question

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

上的行为

Answer 1

编辑

我在jQuery里写了一个小wrapper给那些不想处理的"coding"（讽刺）

https://ergec.github.io/jQuery-for-PhotoSwipe/

原答案

遗憾的是，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 页面上，开发人员提供了一些其他解决方案。

你还有其他几个选择

1. 最肮脏的解决方案。这对于几张图片来说可能已经足够了，但是如果你有大约 10 多张图片，这将花费太多时间来等待初始化。

在页面上嵌入您的全尺寸图片。这将使您能够访问 window 加载时的图像尺寸，以便您可以构建具有实际尺寸的图像数组，然后初始化 PhotoSwipe。

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

3. 最先进的解决方案。我上面提到的 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)
};

但我不得不说我不知道 10 和 12 是干什么用的。

为了保持比例，我只找到了一个CSS技巧：

我在 photoswipe.css 中添加了这样一行：

.pswp img {
  max-width: none;
}

现在是：

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

这似乎不是解决它的最佳方法，但我得到了我需要的结果。

Answer 3

只需输入 CSS "object-fit: contain":

.pswp img {
    max-width: none;
    object-fit: contain;
}

它将解决您的问题

Answer 4

正如马尔科所说

.pswp img {
    max-width: none;
    object-fit: contain;
}

效果很好，但我会添加 !important 到对象匹配属性。

此外，如果您不想使用占位符图像，请添加以下内容，因为它会在重新计算尺寸之前隐藏出现在图像周围的 black/grey 框。

.pswp__img--placeholder--blank{
    display: none !important;
}

Answer 5

我在尝试调整我的 Cargo Collective 网站中的 PhotoSwipe 图像时遇到了同样的问题。我将以下内容添加到自定义 CSS 中并且效果很好：

.pswp img { 
object-fit: contain !important;
max-height: 400px !important;
max-width: auto !important;
margin-top: 100px;
margin-bottom: 100px;
 }

我还通过以下方式将背景更改为白色：

.pswp__bg {
    background-color: #fff !important;
}
.Pswp_bg image-zoom-background {
    background-color: #fff !important;
}

Answer 6

使用getimagesize php function得到width和height宽度在index 0上，高度在index 1[=21上=]

如果您使用 spatie 存储图像，请使用 $image->url 或 $image->getUrl()

获取路径

数据大小属性应如下所示，如果您的图像存储在 storage/app/public/ 下或将图像的完整路径放在

下，请使用 public_path 以避免错误

data-size="{{getimagesize(public_path($img->url))[0]}}x{{getimagesize(public_path($img->url))[1]}}"

Photoswipe 图片 size/ratio

Photoswipe image size/ratio

laravel

photoswipe