Question

我想有图像，小和大屏幕的两个尺寸。对于fancybox，我使用for index, row in df2.iterrows(): startDate = row['Date'].replace("/","") endDate = row['Date'].replace("/","") zipcode = row['Zip'] print("zip: %s, daterange: %s - %s" % (zipcode, startDate, endDate))属性更改fancybox演示中所述的全视图图像，如下所示：

srcset

从完整的fancybox例如：https://codepen.io/anon/pen/wNdyYm?editors=1000

在移动我的网页，我已经设置了元：

<a data-fancybox="test-srcset" data-type="image" href="img1200px.jpeg" data-srcset="img1200px.jpeg 1200w, img640px.jpeg 640w" > <img width="250" src="img250px.jpeg" /> </a>

但是，随着的fancybox，没有选项来设置它，而高清晰度被加载（1200像素），而不是在移动设备上的小之一。

我该怎么办？是否有任何jQuery hack或其他功能？

谢谢

Answer 1

实际上，脚本会为图像标签设置相同的srcset值，其余的取决于浏览器。但是，各浏览器在如何选择使用哪个来源方面存在不一致的地方，例如，在chrome和ff上查看此演示Download Source Code，然后尝试对两者进行大小调整。

Answer 2

所以我想出了一个CSS / html解决方案，使用了meta标签和媒体查询@media，并且没有srcset属性。

对每个链接使用class来显示或不显示，具体取决于设备宽度。
为每个图像使用不同的链接指向完整图像。
使用data-fancybox属性来区分两个全视图画廊。

这应该有效。

<!-- To have mobile considering the real width -->
<meta name="viewport" content="width=device-width" />

<div id="image1">
    <a  data-fancybox="gallery-screen" 
        data-type="image"
        href="img1200px.jpeg"
        class="screen"
    >
        <img width="250" src="img250px.jpeg" />
    </a>
    <a  data-fancybox="gallery-mobile" 
        data-type="image"
        href="img640px.jpeg"
        class="mobile"
    >
        <img width="250" src="img250px.jpeg" />
    </a>
</div>

CSS显示图像的良好链接：

@media all and (max-width: 640px) {
    .screen {
        display: none;
    }
}

@media all and (min-width: 641px) {
    .mobile {
        display: none;
    }
}

查看codepen example

如何在Fancybox中将视口视为width = device-width

2 个答案: