jquery - 制作/改进图像预览的智能方法

Question

这个问题会有点长，对此我很抱歉:)
我花了几天时间寻找最好的解决方案，以在 asp mvc 和 JQuery 中制作图像库。
主要问题是当用户点击拇指时显示图像。
我想让整个浏览器 View 变成黑色，图像位于中心(宽度/高度 100%)。
我做了一些东西并且它有效。但有一些问题我没有解决。
这是我的做法:
我有 ImagesController 和 Index View ，该 View 包含图像缩略图。 ImageID 我存储在图像标签的名称属性中。当用户单击拇指图像时，我调用此 jquery 函数:

$('.imageThumb').live('click', function (e) {
    e.preventDefault();

    $.ajax({ type: "POST",
        url: '@Url.Content("~/Images/Show")',
        data: "imgId=" + $(this)[0].name,
        success: function (d) {
            $(document.body).append(d);
            $(document.body).css("overflow", "hidden");
        }
    })
});

此显示 View 是显示所选图像的全屏浏览器 View :

<div id="bigWrap" style="background: #000; position: fixed; top: 0; left: 0; width: 100%;
    height: 100%;">
    <div id="leftPage" style="width: 100%; height: 100%; background: #000; float: left;
        text-align: center; position: relative;">
        <img id="imgDis" src="@Url.Content("~/" + Model.Path)" alt="@Model.MediaId" 
        style=" max-width: 90%;
                max-height: 90%;  "  />
        <div style="position: absolute; top: 1%; right: 0px;">
            <input id="closeImage" type="image" src="btnClose.png"
                onclick="$('#bigWrap').remove(); $('body').css('overflow', 'auto');" />
        </div>     
            <div style="position: absolute; top: 45%; right: 0px;">
            @using (Html.BeginForm("Next", "Images", FormMethod.Post, new { id = "nextImage" }))
            {    
                @Html.HiddenFor(a => a.MediaId);
                @Html.HiddenFor(a => a.Path);
                <input id="btnNext" type="image" src="btnNext.png" />
            }
        </div>
    </div>
</div>

当用户单击下一步按钮时，我调用:

$(function () {
    $('#nextImage').submit(function () {
        $.ajax({
            url: this.action,
            type: this.method,
            data: "m_id=" + $('#imgDis').attr('alt'),
            beforeSend: function (xhr) {
                $('#bigWrap').empty();
            },
            success: function (result) {
                $('#bigWrap').prepend(result);
            }
        });
        return false;
    });
});

Next ActionMethod 返回相同的 Show View ，只是使用新模型(图像):

    [HttpPost]
            public ActionResult Next(int m_id)
    ...

return View("Show", model);

现在，我对这种方法的问题是:

1. 当用户单击缩略图时，会显示缩略图，但 URL 仍保留:http://localhost:xxxx/Images
2. 当点击下一步按钮时，URL 仍然相同。
3. 这仅在我处于“图像/索引”时有效。如果我从其他 View 打开图像

具有相同的功能(来自jquery调用显示操作)Url更改如http://localhost:xxxx/Images/Show?imgId=47 ，下一个按钮仍然没有任何改变，当我关闭显示的 View 时，我在浏览器中看到了空白页面。

所以，当用户从索引页面观看图像并且用户对网址不感兴趣时​​，我在这里所做的显然是有效的。但我想改变这一点，但我被困在这里。因此，欢迎任何关于做什么、修复或改变一切的想法。

谢谢

Answer 1

我同意。为什么要重新发明轮子？那里有很多好的插件。我最喜欢的当然是Fancybox 。它有一个很好的用户界面...检查these demos 。我敢说，它是下载次数最多的灯箱/模态框。

还有不同场景的很好的例子，例如loading images from AJAX , change the background color等