javascript - 建议使用 的灯箱脚本？

Question

我有一个 PHP 脚本，它根据每个请求动态生成图像。这些图像未保存在服务器上。为此，我使用以下 html

<img src="script.php?parameter1=foo&parameter2=bar" width="50" height="50" />

这会触发对 script.php 的请求;它根据参数动态创建图像 & 只是 echo以下格式的图像数据:

$img = customFunction_generate_report_image($_POST['parameter1'],$_POST['parameter2']);
header('Content-type: image/png');
echo $img;

这可以正常工作并按预期在浏览器中显示图像。现在，我想实现一个灯箱，当用户点击浏览器中的图像时。图像展开并显示在灯箱中。

通常，我使用 Colorbox对于灯箱，但我认为它期望为 <img src="foo.png"而且，它似乎向服务器发出额外的请求。

我想要一种方法，可以将 dom 中的现有图像用于灯箱。任何关于如何实现这一点的指示都将不胜感激。

谢谢

Answer 1

您可以使用 colorbox 来做到这一点。如果您已经在您网站的其他地方使用它，我的也会继续使用它。它可以在不向服务器再次请求图像的情况下工作(但是，第一次打开颜色框时，它确实会请求 overlay.png 文件)。可以选择使用带有 .php 扩展名的照片，但我使用 inline:true 取得了更大的成功。选项，它告诉 colorbox 从已有的内容中提取内容。

在您的情况下，涉及的工作要多一些。通常你可以只用一个标签来做，但是你在页面内容中有一个小图像，然后还需要在模态窗口中有一个更大的尺寸。所以你需要缩略图标签本身，以及 colorbox 将使用的更大的图像标签。但只要两者src属性都一样，多次请求应该没有问题。您的缩略图标签将包含对 colorbox 图像标签的引用，我在这里使用 data-cb 完成了该标签:

<img src="script.php?parameter1=foo&parameter2=bar" width="50" height="50" data-cb="img1-colorbox">

然后是颜色框内容(可以在页面中的任何位置，因为它在颜色框外不可见):

<div class="colorboxContent"> <!-- this class is given the rule "display:none" -->
    <img id="img1-colorbox" src="script.php?parameter1=foo&parameter2=bar">
</div>

如果你需要 html 来处理图像，那么你只需要包装 <img>带有 <div> 的标签并将 id 移动到该包装器中。以及颜色框的 js:

$(document).ready(function() {
    $("[data-cb]").colorbox({
        inline:true, 
        href:function() { return "#" + $(this).data("cb") }
    });
});