Getting shadowbox to work with dyanmic images

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

Getting shadowbox to work with dyanmic images

larry1301
I am converting a site under development from lightbox to shadow box and am having trouble getting shadowbox to work with images that change.  A snippet of my content looks like this. "a href="/s.gif" id='FrameUrCorner600'  rel="shadowbox[frames]"   title="{$MouldingTitle}" img alt=''  id='FrameUrCorner120' class='centerimage' src="/s.gif">/a>" Note(had to leave out some of the < characters to get this to display)
where 's.gif' is just a placeholder. I change the image on certain events as such.                                                 document.getElementById('FrameUrCorner600').href = '/libq/fr/Fr' + MouldingNo + 'urCorner600.gif';                This works fine for lightbox, but it doesn't for shadowbox. The original 's.gif' is displayed. Non-dynamic images work fine. Firebug shows me that the html has been properly changed. It appears that the js changes to the html aren't recognized after shadbox.init() is called and I don't see any methods to get shadowbox to reload the html. Can any one steer me in the right direction? Thanks.
Reply | Threaded
Open this post in threaded view
|

Re: Getting shadowbox to work with dyanmic images

mjijackson
Administrator

To be more precise here, the image itself is not really dynamic. Just the link is. Shadowbox creates a cache at load time (using Shadowbox.setup) for all link elements on the page with rel="shadowbox". This helps the script be faster later. For example, if you were dealing with a large image set with multiple galleries, the script would have to retrieve every gallery element on the page and check to see which links belong in the gallery and exclude the ones that don't. All that parsing would take a while.

The Shadowbox.setup function can be used to reset your link in the cache. Just use it like this:

var link = document.getElementById('FrameUrCorner600');
link.href = '/libq/fr/Fr' + MouldingNo + 'urCorner600.gif';
Shadowbox.setup(link);

That way, your link's href will be reset in the internal cache.

Reply | Threaded
Open this post in threaded view
|

Re: Getting shadowbox to work with dyanmic images

larry1301
Great. Works like charm. Now for a follow up question. This is for a page for a picture framing website to show what a framed piece of art looks like. They have already selected the art and can choose a frame and matting. There are a number of images on this page that use the dynamic link. Using ajax, I build a composite image of the framed work and enlargements of how the mats look together  like this image. I also let them view enlargements of several different views of the moulding. All of these enlargements, including the composite frame are shown with shadowbox. Over the course of making their selections the customer may go through many iterations of moulding and mat colors for the finished work.    My question: Is the shadowbox cache smart enough to keep only the current dynamic links in its cache. I would think so but wanted to ask. BTW, the link href for some of the images is an ajax link (link = document.getElementById('MatCombinedImage400');
            link.href = buildMatImageUrl ( obj, 400, noMats, 0 );
) like this. Dont think that should make a difference as opposed to a normal link. Here is a finshed frame image.
Reply | Threaded
Open this post in threaded view
|

Re: Getting shadowbox to work with dyanmic images

mjijackson
Administrator

Shadowbox stores a cache key expando on elements that have already been set up, so any elements that are set up twice (using Shadowbox.setup) will be overwritten in the cache using the same key. Otherwise, there's no way for Shadowbox to know what links have changed.