My wordpress template uses facebox to show portfolio images via ajax demands.

The issue is the pictures load in various positions with respect to the audiences display 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 shows images perfectly however when I personally use exactly the same line with my template is does not display correctly.

Can someone point me within the right direction to get the pictures to load consistently in the heart of the screen?

Link to the portfolio site im trying to fix

Link to the facebox site

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 made use of outerWidth() rather than width(), although not confident that that accounts correctly for that css 710px width.