具有“调整大小功能”的模态框

发布于 2024-10-21 14:25:34 字数 451 浏览 0 评论 0原文

我几乎总是使用 ShadowBox.js 来实现模态效果。我有一个要求,我似乎无法使用 ShadowBox 来实现,我想知道是否有人有其他可以处理它的建议,以下是要求:

在图库页面上,用户将看到图库中的所有照片,当他们单击打开它们时,将弹出一个模式,其中包含画廊特定的导航(简单)。

该模式将具有变暗内容的正常效果,但将具有一种显示照片(有时还显示视频)的框架。

框架框的宽度始终为 900 像素,内部图像的最大宽度为 800 像素。

照片将始终位于 900 像素框架的中心,每侧至少有 50 像素填充,例如,如果图像宽度为 600 像素,则图像每侧将有 150 像素。

所有照片在上传前都会经过裁剪和准备,宽度不会超过 800 像素。

我可以轻松地在 Shadowbox 中设置尺寸,但这会强制图像被拉伸,转储尺寸并使用标准初始化选项为我提供了图像调整大小的模式。

提前致谢

I almost always use ShadowBox.js for modal effects. I have a requirement that I can't seem to pull off with ShadowBox and I wonder if anyone has another recommendation that could handle it, here are the requirements:

On a gallery page, the user will see all of the photos in the gallery, when they click to open them, a modal will popup with gallery specific nav (easy).

The modal will have the normal effect of the darkened content, but will have a sort of frame in which photos (and occasionally videos) will show.

The frame box will always be 900 pixels wide, and the inside images will have a max width of 800px.

The photos will be centered in the always 900 pixel frame with at least 50 pixels padding on each side, if, for example, the image is 600 pixels wide, the image will have 150 pixels on each side.

The photos will all be cropped and prepped before they are uploaded so that none will be more than 800 pixels wide.

I can easily set the dimensions in shadowbox, but that forces the image to be stretched, dumping the dimensions and using the standard init options gives me image resized modals.

Thanks in advance

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

扫码二维码加入Web技术交流群

发布评论

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

评论(1

我做我的改变 2024-10-28 14:25:34

嗯,现在我想知道我是否已经回答了我自己的问题,照片是数据库管理的,所以我可以简单地创建一个 html 模板来保存基于 QS 参数的照片,每次模式打开图像时,它们实际上都会打开保存图像的 900 像素的 HTML 页面。

Hmm, now I wonder if I have answered my own question, the photos are DB managed, so I could simply create an html template that holds a photo based upon a QS param, each time the modal opens an image, they would actually be opening the HTML page at 900px that holds the image.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文