Lightbox Overlay and Image not aligned

[bazodee]

1) Script Title: Lightbox

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...box2/index.htm

3) Describe problem:

(I think this is only happening in FireFox)

After clicking on certain lightbox images - the overlay and image get mislaigned. Meaning the overlay is one spot and the image is lower down the page. Very ugly!

You can access my website at

www.mywestindianwedding.com/index2.htm

You can recreate the problem by:

Loading the website
scroll to bottom
click advertise with us
click advertise price options
click the third picture down - the one of the old man in the hat
after it opens scroll down and close the picture
Then scroll up and click cakes on the left
click creartive cakes - close that after it opens
then click home on the left
scroll down and click advertise with us
click advertising options
click the third one down - the one with the old man in the hat

It should be misaligned.

I really really need help with this, I have searched and searched, then tried to switch to hoverbox, thickbox, and slim box - and something is probably clashing in the libraries because i could not get any to work.

Thanks.

[jscheuer1]

Looks like you are initializing Lightbox more than once on the page. This, or something like it is probably required due to AJAX import of content to the index2 page. If I have that much right, there is a way in v2.03 to update the links that Lightbox will trigger off of without reinserting all of the lightbox markup. If you are with me so far though, v2.04 doesn't require that at all, so I would suggest an update to it.

With v2.04 you can import and/or remove links with rel="lightbox" from a page without ever having to run Lightbox again.

[bazodee]

I have been reading so many lightbox posts all over the internet and remember that being a solution for someone elses issue. I will try to update to the latest versions and reduce the amount of lightbox initializing.

I will update everyone.

Thanks again!

[bazodee]

John I did the updates and it seems to be fixed.

The only issue I see now - which is not a big issue at all, I can live with it - when the lightboxes open they are very unsmooth - jagged. Take a look around and you will see what I mean. Very choppy in the animation.

but I am so grateful for your help with that misalignment.

Just so everyone one knows what I did - in case people look at this post in the future.

I upgraded everything to 2.04 lightbox
I referenced the builder and effects js in the index file before referencing the lightbox.js (I was getting an error if I did not do that)
I removed from all pages any initialization of the lightbox.js which came from the old version.

and now it works.

[jscheuer1]

That's governed by the local computer viewing the page. Animation is CPU and memory intensive. If you have a lot of other things going on, or even just one that takes up a lot of the resources of either, or the CPU is slow to begin with and/or there isn't much system memory, they will appear choppy. I often have lots of things going on, and right now is no exception, but the animations appear smooth here. However, if I had a slide show actively transitioning in another tab and PSP open with several large images open with many undo/redo actions stored, things would probably be choppy here as well.

One other possible factor is the internet connection, if the images aren't cached yet, resources devoted to downloading them on a slow connection may interfere with the animations.

The animations can be disabled by setting them to false in the lightbox.js file:

// -----------------------------------------------------------------------------------

//
//  Configurationl
//
LightboxOptions = Object.extend({
    fileLoadingImage:        'images/loading.gif',     
    fileBottomNavCloseImage: 'images/closelabel.gif',

    overlayOpacity: 0.8,   // controls transparency of shadow overlay

    animate: false,         // toggles resizing animations
    resizeSpeed: 7,        // controls the speed of the image resizing animations (1=slowest and 10=fastest)

    borderSize: 10,         //if you adjust the padding in the CSS, you will need to update this variable

	// When grouping images this is used to write: Image # of #.
	// Change it for non-english localization
	labelImage: "Image",
	labelOf: "of"
}, window.LightboxOptions || {});

// -----------------------------------------------------------------------------------

But I wouldn't recommend that in this case.