我正在跟踪上一篇文章（Fancy box with one image only），以了解是否可以使用fancybox中的缩略图来动态创建显示的较大图像。我知道你可以使用document.createElement（“IMG”）;将较大版本的现有图像添加到文档中，或者您可以使用target.style.width和target.style.height来更改图像的大小并将其指定给不同的ID，但我似乎无法让fancybox访问并使用更大版本的缩略图。每张图片总是需要2种尺寸吗？
这是我一直在使用的代码。它会自己调整图像大小，但它似乎不适用于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>
单击该链接可激活灯箱，但id =“image_2_larger”将以正常大小显示。我已经确认，如果我只是在没有fancybox的情况下执行此操作，javascript将生成更大的图像
<img id="target" src="smallImage.jpg" onclick="magnify()">
<img id="thumbnail" src="smallImage.jpg">
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
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>