Hi!
I'm currently working on a project that loads content (linked images) on
a page using AJAX. A click on a link is supposed to open up a
corresponding slideshow (flash) using Shadowbox. (Shadowbox is similar
to Lightbox, but can serve all kinds of media - not just images.
http://www.mjijackson.com/shadowbox/).
Now to the problem at hand:
Shadowbox uses the rel-attribute of the a-tag to make the slideshow load
in a shadowbox and not like a regular href-tag. But since the content is
loaded dynamically using AJAX, it's not certain that Shadowbox has
identified the links and turned them into Shadowbox-links. They are not
present when the page first loads - user interaction on the page loads
the links using jQuery/AJAX.
A link that is supposed to open up in Shadowbox looks like this:
<a class="shadow"
href="/flash/MySavvySlideshowViewer.swf?galleryXMLPath=path/to/the/gallery/XML/that/flash/uses.xml"
rel="shadowbox;height=600;width=800;">
<img src="myThumbnailImage.gif" />
</a>
The testing I've done so far indicates that the problem is one of
timing. Since I add new content to the page (using AJAX) I will also
have to redo the Shadowbox setup (not the init, just the setup using
"Shadowbox.setup"). I do this after the dynamic content has finished
loading.
BUT if the user is too quick, it seems like the setup doesn't have time
to finish and the raw href (flash) is loaded in the browser window
instead of the nice Shadowbox link. At first I thought the problem was
related to Internet Explorer since it didn't seem to appear in Firefox,
but it turned out that I COULD reproduce this behavior in Firefox too, I
just had to be much faster. My guess it that the fast execution of
JavaScript compared to the slow execution in Internet Explorer threw me off.
And now I'm kind of stuck. Any pointers, tips and suggestions are most
welcome. Can I block the links somehow, making them clickable only when
I'm sure that they will open in Shadowbox? Can I somehow use Live Query?
Regards,
Thomas Kahn
Web Developer, Stockholm, Sweden
