暗示脚本可以与<img src="script.php" />一起使用？

我有一个PHP脚本，它动态生成每个请求上的图像。这些图像不保存在服务器上。要做到这一点，我用下面的HTML暗示脚本可以与<img src="script.php" />一起使用？

<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中的现有图像可用于灯箱的方法。任何指示如何做到这一点，将不胜感激。

感谢

来源

2011-11-23 CuriousMind

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

就你的情况而言，涉及的工作量较多。通常情况下，只需使用一个标签就可以实现，但在页面内容中有一个小图像，那么在模式窗口中也需要更大的尺寸。因此，您需要缩略图图像标签本身，以及colorbox将使用的更大图像标签。但只要src属性相同，多个请求应该没有问题。您的缩略图标签将包括一个参考颜色框图像标签，我已经与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的colorbox：

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

来源

2011-11-24 09:19:37 Donamite

谢谢，我还需要添加'photo：true'才能使其工作:) – CuriousMind

您的意思是它没有'photo：true'选项对您没有帮助吗？如果没有它，它适用于我，但如果是这种情况，我应该更新答案以确保安全。 – Donamite

它添加'photo：true'选项后工作:) – CuriousMind

的fancybox有一个iframe模式，它可以接受的图像，网页（HTM，应该是PHP的过），甚至PDF。

http://fancybox.net

来源

2011-11-23 22:44:11

iframe会触发另一个请求到服务器？它可以使用当前显示在浏览器中的图像并显示在灯箱中吗？ – CuriousMind

iframe是另一个请求。图片？是的，可以，你可以设置一个rel属性。该属性可以是相同的图像网址或一个较大的大小。这是我点击缩略图时使用的。 –

我总是发现FancyBox是一个非常好的收藏，具有良好的文档了。

它会应付你的情况就好。

来源

2011-11-23 22:44:21 Alex

暗示脚本可以与<img src="script.php" />一起使用？

回答

相关问题