建议与？

发布于 2024-12-17 17:47:51 字数 656 浏览 1 评论 0原文

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

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

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

：按预期在浏览器中显示图像。现在，我想实现一个灯箱，以便当用户单击浏览器中的图像时。图像扩展&显示在灯箱中。

通常，我使用 Colorbox 作为灯箱，但我认为它期望为

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

谢谢

原文

I have a PHP script which dynamically generats images on each request. These images are not saved on server. to do this, I use the following html

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

This fires off an request to script.php; which dynamically creates the images based on parameters & just echo image data in following format:

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

This works & displays image in browser as expected. Now, I want to implement a lightbox so, when the user clicks on the image in broswer. the image expands & gets displayed in lightbox.

Normally, I use Colorbox for lightbox but I think it expects as <img src="foo.png" and moreover, it seem to make addititonal request to server.

I want a method using which existing image in dom can be used for lightbox. Any pointer on how to accomplish this would appreciated.

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

吻泪 2024-12-24 17:47:52

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

就您而言，需要做更多的工作。通常，您可以只使用一个标签来完成此操作，但是页面内容中有一个小图像，那么模式窗口中还需要更大的尺寸。因此，您需要缩略图标签本身，以及 colorbox 将使用的更大图像标签。但只要两个src属性相同，多次请求就应该没有问题。您的缩略图图像标记将包含对 colorbox 图像标记的引用，我在这里使用 data-cb 完成此操作：

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

然后是 colorbox 内容（可以位于页面中的任何位置，因为它不是在颜色框之外可见）：

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

如果您需要 html 来配合图像，那么您只需要用

包装该标签，然后将 id 移入其中包装纸。以及颜色框的 js：

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

You can do that with colorbox. If you are already using that elsewhere in your site, mine as well keep with it. And it can work without making another request to the server for the image (the first time the colorbox is opened, however, it does make a request for the overlay.png file). There is an option to use photos with a .php extension, but I have had more success just using the inline:true option, which tells colorbox to pull the content from what's already there.

In your case, there is a little more work involved. Normally you could do it with just the one tag, but you have a small image in the page content, then also need a larger size in the modal window. So you need the thumbnail image tag itself, and also a larger image tag that colorbox will use. But as long as both src attributes are the same, there should be no problem with multiple requests. Your thumbnail image tag would include a reference to the colorbox image tag, which I've done here with data-cb:

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

And then for the colorbox content (can be anywhere in the page, as it is not visible outside of the colorbox):

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

Should you need html to go with the image, then you only need to wrap that <img> tag with a <div> and move the id into that wrapper. And the js for the colorbox:

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

回复收藏 0 原文