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

Question

这个问题会有点长，我很抱歉 :)
我搜索了几天的最佳解决方案，以在 asp mvc 和 JQuery 中制作图片库。
主要问题是当用户单击拇指时显示图像。
我想让整个浏览器视图变黑并在中心显示图像（宽度/高度 100%）。
我做了一些东西并且它有效。但是有一些我没有解决的问题。
我是怎么做到的：
我有 ImagesController 和 Index 视图，该视图包含图像缩略图。 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");
        }
    })
});

此 Show 视图是显示所选图像的全屏浏览器视图：

<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>

当用户点击next 按钮时，我调用：

$(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 视图，只是带有新模型（图片）：

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

return View("Show", model);

现在，我使用这种方法遇到的问题是：

1. 当用户点击缩略图时显示，但 URL 保持不变：http://localhost:xxxx/Images
2. 单击下一步按钮时，URL 仍然相同。
3. 这仅适用于我在图像/索引中。如果我 从其他视图打开图像

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

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

谢谢

Answer 1

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

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

Answer 2

这应该对您有所帮助。

http://www.aspphotogallery.net/mvcphotogallery/Demo

或者这个用于服务器端处理http://imageresizing.net/

干杯 帕尔米德

Answer 3

如果您可以从头开始，我建议您使用 jQuery 插件...查看下面的链接，了解一堆不同的插件，它们正在做您想做的事情：

http://www.designyourway.net/blog/resources/30-efficient-jquery-lightbox-plugins/

Answer 4

考虑到上述问题：

1,2 - 当然 url 不会改变，因为您使用的是 AJAX，如果您通过 AJAX 获取某些内容，浏览器的 URL 不会自动更改，您必须在成功调用 ajax 后更改它

3 - 您应该提供有关如何准确调用 Show 操作的更多信息。看起来你得到了你描述的结果，因为你正在向你的 show 动作发出一个新的 http get 请求（并且正如预期的那样，浏览器只得到了 show 动作的结果），所以难怪在关闭图像后你会看到一个空白页面，因为页面上没有其他内容

即使您将能够克服这些问题。我觉得你真的应该像其他人建议的那样考虑使用现有的解决方案（无论是 jQuery 插件还是 nuget 包）来解决这个问题。