sách gpt4 ai đã đi

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

In lại 作者:行者123 更新时间:2023-12-01 07:25:42 30 4
mua khóa gpt4 Nike

这个问题会有点长,对此我很抱歉:)
我花了几天时间寻找最好的解决方案,以在 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 :



@Model.MediaId
style=" max-width: 90%;
max-height: 90%; " />


onclick="$('#bigWrap').remove(); $('body').css('overflow', 'auto');" />


@using (Html.BeginForm("Next", "Images", FormMethod.Post, new { id = "nextImage" }))
{
@Html.HiddenFor(a => a.MediaId);
@Html.HiddenFor(a => a.Path);

}



当用户单击Bước tiếp theo按钮时,我调用:

$(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);
}
});
trả về 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 时,我在浏览器中看到了空白页面。

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

Cảm ơn

1 Câu trả lời

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

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

关于jquery - 制作/改进图像预览的智能方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9743509/

30 4 0
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com