如何使图像拉伸以填充 PhotoSwipe 中的可用区域

Question

我希望使用PhotoSwipe 在我的响应式网站上显示每篇文章中的所有图像，例如当您单击或点击http://dailymail.co.uk 中的内容内图像时获得的图库。主要用途是为用户提供图片的大视图，并允许他们在移动设备上放大图片而无需离开文章。

PhotoSwipe 非常适合此目的。我的 JS 梳理文章内容并从它找到的图像构建 PhotoSwipe 数组。但是有一个问题：我文章中的一些图片很小。这在移动设备上并不算太糟糕，但在桌面上，我很可能会在一个大的黑色画廊区域的中间看到一个小图像。每日邮报通过总是将他们的图片拉伸到适合画廊区域来解决这个问题 - 有些图片有点丑陋，但它提供了一个大视野。

有什么方法可以选择性地拉伸 PhotoSwipe 画廊中的小图像以填充更多可用区域？旧版本的 PhotoSwipe 曾经有一个 imageScaleMethod 选项，可以让您将图像调整到屏幕尺寸：我可以用最新版本 v4.0.7 做类似的事情吗？

这是一个CodePen，它应该能说明我在说什么 - 第三张图片是我想稍微扩展一下的那种图片。我在这个例子中的幻灯片是：

var items = [
    {
        src: 'http://lorempixel.com/1000/750/cats/',
        w: 1000,
        h: 750,
        title: 'Fairly big cat'
    },
    {
        src: 'http://lorempixel.com/1200/900/cats/',
        w: 1200,
        h: 900,
        title: 'Another quite big cat'
    },
    {
        src: 'http://lorempixel.com/200/320/cats/',
        w: 200,
        h: 320,
        title: 'Small cat'
    }
];

Answer 1

如果您查看源代码，您会发现它在某些时候是/曾经是计划中的功能，因为它有部分内容如下：

// not fully implemented yet
scaleMode: 'fit' // TODO

这确实没有多大帮助，但我只是说这是一个有趣的细节。

我对这个问题的解决方案是：只需将 data-size 属性设置为大于大多数常见屏幕尺寸的尺寸。当我从 PHP 生成标记时，我简单地写了这样的内容：

data-size="<?php echo intval($img_x * 1.5); ?>x<?php echo intval($img_y * 1.5); ?>"

实际所需的数量可能因您的情况而异，但我已将所有图像设置为固定大小，并且 1.5 个乘数足以使它们填满大多数屏幕。

这不是一个“正确”的解决方案，但是，它对客户端来说简单、快速且轻量级（不需要额外的 javascript 魔法）。与上面建议的复杂的 JavaScript 繁重的解决方案相比，它可能对简单的项目有好处。

事实上，我使用的是MobileDetect，所以我只是增加了台式机的图像大小，因为我的原始图像适用于手机（和平板电脑）。

data-size="<?php echo intval($img_x * ($mobile_detect->isMobile() ? 1 : 1.5)); ?>x<?php echo intval($img_y * ($mobile_detect->isMobile() ? 1 : 1.5)); ?>"

您需要根据自己的需要规划尺寸，并且您可能需要为每张图片使用不同的乘数，但我的观点是尺寸操作可以在图库标记中轻松完成，而不是试图覆盖这些值来自 JavaScript 或在某些事件后强制缩放 PhotoSwipe（我已经尝试过并且在切换图像时或多或少地工作得很好，但例如在打开 PhotoSwipe 时会导致故障）。

Answer 2

我使用的是 wordpress 插件并添加了以下 css。 （然后我将 wordpress 中的缩略图大小设置为 0 0。）

.photoswipe_gallery_holder {
width: 101%;
margin-left: -5px;
}
.photoswipe_gallery {
width: 100%!important;
margin-top: 20px!important;
margin-bottom: 20px!important;
margin-right: 0px!important;
margin-left: 0px!important;
padding-bottom:0px!important;
}
.photoswipe_gallery figure {
width: 100%!important;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
padding: 5px!important;
}
.photoswipe_gallery figure img {
width: 100%!important;
height: auto!important;
padding: 0px!important;
}
.photoswipe_gallery figure a {
width: 100%!important;
height: auto!important;
}

@media screen and (min-width: 480px) {
.photoswipe_gallery figure {
width: 50%!important;
}
}

@media screen and (min-width: 750px) {
.photoswipe_gallery figure {
width: 25%!important;
}
}

“持有人” div 是为了让我们可以将事物稍稍移动以对齐。如果你使用这个，你需要设置溢出：隐藏；在父 div 上。在响应式网站上，我的父 div 最宽处为 968 像素。

Answer 3

起初我想我可以通过添加一个beforeChange 侦听器来解决这个问题，它会放大每个图像以适应显示区域。方便地，PhotoSwipe 中的每个项目都有一个属性fitRatio，它表示缩放比例需要适合显示区域。

在我的CodePen 的第 34 行，就在 gallery.init(); 行之前，我添加了：

gallery.listen('beforeChange', function () {
    gallery.zoomTo(gallery.currItem.fitRatio, {x: gallery.viewportSize.x / 2, y: gallery.viewportSize.y / 2}, 1);
});

将当前图片缩放到正确的比例以适合画廊，以幻灯片的 x 和 y 中心为中心，持续时间为 1 微秒。 （有关 zoomTo 方法的详细信息，请参阅PhotoSwipe API documentation。）

但是放大会停用桌面上的“点击滑动”操作，我想保留它。

因此，我正在测量浏览器窗口并设置图像的宽度和高度以匹配。您必须考虑图像是横向还是纵向，并且如果用户调整浏览器窗口的大小，您需要更新尺寸。

var measureWindow = function () {
    windowW = $window.width();
    windowH = $window.height();
};

measureWindow();

// If image is landscape or square, set width to window width and height to width * ratio
// If image is portrait, set height to window height and width to height / ratio
var getImageDimensions = function (w, h) {
    var ratio = h / w;
    if (w >= h) {
        return {
            width : windowW,
            height: windowW * ratio
        }
    } else {
        return {
            width : windowH / ratio,
            height: windowH
        }
    }
};

然后，当我将每个图像添加到我的数组中时，我会这样做

var dimensions = getImageDimensions(width, height),
    o = {
        el : value,
        src: src,
        w  : dimensions.width,
        h  : dimensions.height
    };

其中 o 是表示图像的对象。

如果用户调整窗口大小，我还会在我的库中添加一个侦听器以再次调用measureWindow。这将更新 windowW 和 windowH。

    var debouncedMeasure = _.debounce(measureWindow, 250);

    gallery.listen('beforeResize', function () {
        debouncedMeasure();
    });

严格来说，当这种情况发生时，我应该更新图像数组中的尺寸，以便新图像的大小正确适应新的窗口尺寸。

这是 the solution 我最终得到的 - 你需要查看 full preview 以了解它是如何工作的。

---

编辑

为了从 PhotoSwipe 获得最佳效果，我发现我必须在页面其余部分处于活动状态时隐藏内容。当我打开它时，我会这样做

html.addClass('photoswipe-active');

gallery.listen('close', function () {
    html.removeClass('photoswipe-active');
});

并在该类存在时在其他内容上设置可见性：隐藏。如果页面中有任何内容会导致重绘（如动画 gif），则可能会导致 PhotoSwipe 的滑动和捏合缩放手势出现卡顿。隐藏内容使其保持流畅。

当我尝试在调整大小时测量 PhotoSwipe 元素时，我也遇到了性能问题 - 改为测量窗口似乎要好得多。