使用带有响应的 InterImage Link 的 Lightbox

发布于 2024-12-03 07:53:36 字数 1340 浏览 0 评论 0原文

我有一个回复，其中我存储了缩略图和原始图像，如下所示。

context.Response.Write("<a href='" + (tempPath & "/") + filename + "'><img src='" + (tempPath & "/thumbs/") + "t_" + filename + "'/></a>")

那么现在我如何给出灯箱效果

这是我的 Uploadify OnComplete 事件：

<script type="text/javascript">
    $(window).load(
    function () {
        $("#Inputfile").fileUpload({
            'uploader': 'scripts/uploader.swf',
            'cancelImg': 'images/cancel.png',
            'buttonText': 'Browse Files',
            'script': 'UploadVB.ashx',
            'folder': 'uploads',
            'fileDesc': 'Image Files',
            'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
            'queueSizeLimit': 9999,
            'simUploadLimit': 2,
            'sizeLimit': 4000000,
            'multi': true,
            'auto': true,
 'onComplete': function (event, queueID, fileObj, response, data) {
            var paths = response.split(";");

            $("#thumbnail").append(response)
              },

    });
}
);

这是我的 DIV 元素：

<div id="thumbnail">
Here I am able to display the thumbnail image through which I called through the response and If I click the thumbnail it's opening the Image but not with the Lightbox effect.
</div>

原文

I have a response in which I am storing both the thumbnail and the Original Images as shown below.

context.Response.Write("<a href='" + (tempPath & "/") + filename + "'><img src='" + (tempPath & "/thumbs/") + "t_" + filename + "'/></a>")

So Now how do I give the Lightbox effect

Here is my Uploadify OnComplete event:

<script type="text/javascript">
    $(window).load(
    function () {
        $("#Inputfile").fileUpload({
            'uploader': 'scripts/uploader.swf',
            'cancelImg': 'images/cancel.png',
            'buttonText': 'Browse Files',
            'script': 'UploadVB.ashx',
            'folder': 'uploads',
            'fileDesc': 'Image Files',
            'fileExt': '*.jpg;*.jpeg;*.gif;*.png',
            'queueSizeLimit': 9999,
            'simUploadLimit': 2,
            'sizeLimit': 4000000,
            'multi': true,
            'auto': true,
 'onComplete': function (event, queueID, fileObj, response, data) {
            var paths = response.split(";");

            $("#thumbnail").append(response)
              },

    });
}
);

And here is my DIV element:

<div id="thumbnail">
Here I am able to display the thumbnail image through which I called through the response and If I click the thumbnail it's opening the Image but not with the Lightbox effect.
</div>

分享到QQ

分享到微博

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

发布评论

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

烦人精 2024-12-10 07:53:36

附加响应后您应该做的是设置灯箱效果。
您还可以在 #thumbnail 中委托单击事件，以便对于在锚点上完成的缩略图中的每次单击，都会调用该函数。然后您可以在灯箱中打开图像。

让您开始：

$('#thumbnail').delegate('a', 'click', function (e) {

    // open the href inside a lightbox

    e.preventDefault(); // to prevent opening the link
});

What you should do after appending the response is setting up the lightbox effect.
You can also delegate the click event within #thumbnail so that for every click within thumbnail that is done on an anchor, the function will be called. you can then open the image in a lightbox.

to get you started:

$('#thumbnail').delegate('a', 'click', function (e) {

    // open the href inside a lightbox

    e.preventDefault(); // to prevent opening the link
});

回复收藏 0 原文

~没有更多了~