Images in lightbox not centering correctly

[fbb]

I've implemented Highslide into a portfolio website that I am building with wordpress. I have noticed some odd behaviour that I'm hoping someone can help me correct. Follow the instructions below to observe the problem.

1. Go to this page: http://the7thbough.com/portfolio-item/assorted-props-2/
2. scroll down until you see a long thumbnail showing a graphic of a brain with roots leading to a bottle. Click on this image.
3. The image shows up within the lightbox properly centered in the viewport. Now click on one of the other images from among the thumbnails on the right.
4. Notice that the enlarged image for this thumbnail is not centered. It's right and top edges are positioned where the right and top edges of the previous image were, creating an offset (the same result occurs if you choose another image via the arrow keys on the keyboard).

I've used the highslide editor to construct a similar layout and observed the same behaviour within the editor so I think the problem lies within the highslide code.

I expect that I should be able to create a custom coded solution to this issue. You'll notice if you click on the images within the lightbox that doing so enlarges the image to it's full size, and clicking again reduces it back to a size that fits within the viewport and properly centers it. this is the result of some of my own custom coding in the config file but I don't do this sort of thing very often and it's been a long time since I made these customizations (for my previous site), so I'm hoping someone can get me pointed in the right direction for correcting how the image is centered when choosing a different image from within the lightbox.

Thanks in advance

Update: I've checked my old site to see if the problem shows up there and it doesn't (see this page: http://fbbportfolio.com/2009/3DModTex_JnP-Twig.php). The core files between these sites are the same, only slight differences exist in the config files, and not the kind that would make a difference like this (I think), plus you'll recall that I observed the same faulty behavior in the highslide editor.

[fbb]

In case it's helpful, here is a link to the highslide editor settings that are displaying the same faulty behavior:

http://highslide.com/editor/?config=%7B ... ight%22%7D

[fbb]

There's got to be a better way to do this but I was able to solve the problem by adding this code, which is really just the same code I was using for the expand and contract on LMB click functionality I added to my site, I just needed to figure out how to make it act on the expander at the right time:

Code: Select all

/* ************* For Centering ************* */
	// get window scroll positions
	var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
	var scrollTop  = window.pageYOffset || document.documentElement.scrollTop;
	// set arbitrary offsets
	var imgOffsetToCenterXAdjust = -1;
	var imgOffsetToCenterYAdjust = -9;

hs.Expander.prototype.onAfterExpand = function(){
        /* 
        ********************************************************************  
        Center the image 
        */
		// get window scroll positions
		scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
		scrollTop  = window.pageYOffset || document.documentElement.scrollTop;
        // calculate full expander offsets to center it to the screen
        var imgOffsetToCenterX = (Math.floor((window.innerWidth - hsFeaturedImageMarginRight - this.x.size) / 2) + scrollLeft + imgOffsetToCenterXAdjust);
        var imgOffsetToCenterY = (Math.floor((window.innerHeight - hsFeaturedImageMarginTop - this.y.size) / 2) + scrollTop + hsFeaturedImageMarginTop + imgOffsetToCenterYAdjust);
        // center the expander
        hs.getExpander().moveTo(imgOffsetToCenterX, imgOffsetToCenterY);
    };