Issue with milkbox and innerHTML

milkbox issue with innerHTML and dynamic image

[CWonder]

Hi All,

I have been fighting with an issue with milkbox for the past 6 hours, at this point I am just plain frustrated. What I am trying to do is implement Milkbox. Integrating it is not the problem since I have done this plenty of times. When you first come to the page and click the first thumbnail image it works fine. however it only works when you first come to the page and then when you click the next portfolio item and then click the thumb nail image that is displayed it does not show the image in lightbox, it just shows it in a blank page. I am setting the new image using the .innerHTML method. I am doing this because I am changing the div contents to something that looks along the lines of

<a href="portfolio/tiresfortreatment.jpg" rel="milkbox" title="Tires for Treatment"><img src="slices/portfolio/thumbs/tires-for-treatment.png" alt="Tires for Treatment" /></a>

I read that innerHTML removes event listeners from html elements. So then I tried to call the milkbox constructor directly by changing the text of my .innerHTML property to directly call the constructor of milkbox on click like this:

<a href="portfolio/tiresfortreatment.jpg" rel="milkbox" title="Tires for Treatment" onclick="Milkbox.initialize()"><img src="slices/portfolio/thumbs/tires-for-treatment.png" alt="Tires for Treatment" /></a>

To get a clear understanding of what's going on the page can be viewed at :

[url]www.cspsolutions.ca/camrin[/url]

The custom javascript file (part of the issue) is located at:

[url]www.cspsolutions.ca/camrin/portfolio.js[/url]

The milkbox class can be viewed at:

[url]www.cspsolutions.ca/camrin/js/milkbox.js[/url]

Any help would be more than appreciated.

Thanks for your time,
Cam

[Fotiman]

Try this... in your setDisplay function (where you insert the new innerHTML value), after you've inserted the new values try calling:

milkbox.prepareGalleries();

Note, the "m" is lowercase because there is an instance of the Milkbox class stored in a milkbox variable.

And then remove the onclick code from your <a> that tries to call the initialize method.

The prepareGalleries method searches the page for <a> elements containing links. Let me know if that works.

[CWonder]

Thank you, problem solved it's milkbox.reloadGalleries() Thank you very much for your time.