Question

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

Answer 1

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.