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;

这适用于＆amp;按预期在浏览器中显示图像。现在，我希望实现一个灯箱，这样当用户点击broswer中的图像时。图像扩大＆amp;在灯箱中显示。

通常情况下，我将Colorbox用于灯箱，但我认为它期望为<img src="foo.png"，此外，它似乎会向服务器发出附加请求。

我想要一种方法，使用dom中的现有图像可以用于灯箱。关于如何实现这一点的任何指针都会受到赞赏。

由于

Answer 1

你可以用colorbox做到这一点。如果您已经在您网站的其他地方使用它，那么我也可以使用它。并且它可以在不向服务器发送另一个图像请求的情况下工作（第一次打开颜色框时，它确实请求overlay.png文件）。可以选择使用扩展名为.php的照片，但是我使用inline:true选项取得了更大的成功，该选项告诉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移动到该包装中。和colorbox的js：

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

Answer 2

我总是发现FancyBox是一个非常好的灯箱，也有很好的文档。

它会很好地应对你的情况。

Answer 3

FancyBox有一个iframe模式，可以接受图像，页面（htm，也应该是php），甚至是PDF。

http://fancybox.net

建议使用<img src="script.php"/>的灯箱脚本？

3 个答案: