如何正确居中facebox ajax请求？

发布于 2024-09-17 01:13:33 字数 675 浏览 3 评论 0原文

我的 WordPress 模板使用 Facebox 通过 Ajax 请求显示投资组合图像。

问题是图像加载在不同的位置，具体取决于观看者的屏幕尺寸。

我的模板使用

$('#facebox').css({
    top:    getPageScroll()[1] + (getPageHeight() / 10),
    left:   385.5
  }).show()

Facebox 网站使用

$('#facebox').css({
   top: getPageScroll()[1] + (getPageHeight() / 10),
   left: $(window).width() / 2 - 205
 }).show()

Facebox 网站完美地显示图像，但是当我使用与我的模板相同的行时，无法正确显示。

有人可以指出正确的方向，使图像在屏幕中央一致加载吗？

链接到我正在尝试修复的作品集网站

Facebook 网站链接

原文

My wordpress template uses facebox to display portfolio images via ajax requests.

The problem is the images load in different positions depending on the viewers screen size.

My template uses

$('#facebox').css({
    top:    getPageScroll()[1] + (getPageHeight() / 10),
    left:   385.5
  }).show()

The facebox site uses

$('#facebox').css({
   top: getPageScroll()[1] + (getPageHeight() / 10),
   left: $(window).width() / 2 - 205
 }).show()

The facebox site displays images perfectly but when I use the same line with my template is doesn't display properly.

Can someone point me in the right direction for getting the images to load consistently in the center of the screen?

Link to the portfolio site im trying to fix

Link to the facebox site

分享到QQ

分享到微博

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

发布评论

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

楠木可依 2024-09-24 01:13:33

公式为： (window.width / 2) - (target.width / 2)

$('#facebox').css({
   top: getPageScroll()[1] + (getPageHeight() / 10),
   left: ($(window).width() / 2) - ($('#facebox').outerWidth() / 2)
 }).show()

请注意，您的facebox.css 将 div#facebox 设置为 710px 宽度，尽管您的图像更宽。我使用了outerWidth()而不是width()，但不确定这是否正确地解释了css 710px宽度。

Formula is: (window.width / 2) - (target.width / 2)

$('#facebox').css({
   top: getPageScroll()[1] + (getPageHeight() / 10),
   left: ($(window).width() / 2) - ($('#facebox').outerWidth() / 2)
 }).show()

Note, your facebox.css sets the div#facebox to 710px width, though your images are wider. I used outerWidth() instead of width(), but not sure if that accounts properly for the css 710px width.

回复收藏 0 原文

~没有更多了~