Question

这个问题会有点长，我很抱歉:) 我寻找几天的最佳解决方案，在asp mvc和JQuery中制作图库主要问题是当用户点击拇指时显示图像我想让整个浏览器视图中的黑色和图像在中心（宽度/高度100％）我做了一些东西而且很有效。但是有一些我没有解决的问题我是怎么做到的：
我有ImagesController和Index视图，该视图包含图像大拇指。 ImageID我存储在image标签的name属性中。当用户点击拇指图像时，我调用此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");
        }
    })
});

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

<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;
    });
});

下一个ActionMethod返回与新模型（图像）相同的Show视图：

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

return View("Show", model);

现在，我采用这种方法的问题是：

当用户点击拇指图像时，会显示网址：http://localhost:xxxx/Images
点击下一步按钮时，网址仍然相同。
仅当我在图像/索引中时才有效。如果我从其他视图打开图像

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

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

由于

Answer 1

这应该对你有所帮助。

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

或此服务器端处理http://imageresizing.net/

干杯成员Parminder

Answer 2

我同意。你为什么要再发明轮子？那里有很多好的插件。我最喜欢的当然是Fancybox。它有一个很好的UI ...检查these demos。我敢说，这是最下载的灯箱/模态盒子。

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

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包）来解决这个问题。

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

4 个答案: