Question

我正在关注上一篇文章（Fancy box with one image only）来确定是否可以使用fancybox中的缩略图来动态创建要显示的较大图像。我知道您可以使用document.createElement（“ IMG”）;向您的文档中添加较大版本的现有图像，或者可以使用target.style.width和target.style.height更改图像的大小并将其分配给其他ID，但我似乎无法让fancybox可以访问和使用较大版本的缩略图。每个图像是否总是需要2种尺寸？

这是我一直在使用的代码。它会自行调整图像大小，但似乎无法与fancybox一起使用。我定义了以下javascript函数，以处理图像：

$stockSummary = Warehouse1StockSummaries::firstOrCreate(
    ['product_id' => $product_id ], 
    ['qty_in' => $qty_in, 'qty_out' => null]
);

if (!$stockSummary->wasRecentlyCreated) {
    $stockSummary->increment('qty_in', $qty_in);
}

点击链接会激活灯箱，但id =“ image_2_larger”会以其正常大小显示。我已经确认，如果我不使用fancybox进行操作，则javascript会产生较大的图像

<script>function magnify() { 
var thumbnail = document.getElementById('image_2');
var target = document.getElementById('image_2_larger');
var w = thumbnail.width;
var h = thumbnail.height;
target.style.width= w*1.5 +'px';
target.style.height= h*1.5 +'px';
</script>   

<body>
<p class="imglist">
<a id="image_2_larger" href="smallImage.jpg" 
onclick="magnify()" data-fancybox> 
<img id="image_2" src="smallImage.jpg"></a></p>
</body>

Answer 1

Do you always need 2 sizes for each image?-任何灯箱脚本的想法是显示图像的调整大小版本以节省带宽，提高页面加载速度等，然后使用脚本以全尺寸显示图像，而不会强迫用户离开网页。

很明显，您不必强制创建该图像的两个版本，并且可以这样做-<a data-fancybox href="big-image.jpg"><img width="200" src="big-image.jpg" /></a>，但这是不切实际的。

但是，如果您希望通过使用单个<img>元素来启动fancybox（并具有缩放效果），那么请看一下这个演示- https://codepen.io/fancyapps/pen/JzdXxp?editors=1010

Answer 2

贾尼斯（Janis）的最新评论中提出的相反策略似乎奏效。您可以使用较大的图像并缩小它，而不是尝试使用缩略图来放大它，如下所示。

<script>
  function shrinkImage() {
    var thumbnail = document.getElementById('image_2');
    var w = thumbnail.width;
    var h = thumbnail.height;
    thumbnail.style.width = w*0.5 +'px';
    thumbnail.style.height = h*0.5 +'px';
    return;
  }
</script>

<body>
  <p class="imglist">
    <a href="largerImage.jpg" data-fancybox>
    <img id="image_2" src="largerImage.jpg" onload="shrinkImage()"></a>
  </p>
</body>

是否可以在花哨的盒子中动态创建较大的图像？

2 个答案: