Milkbox and javascript .innerHTML Issue

[camrinp]

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 :

www.cspsolutions.ca/camrin

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

www.cspsolutions.ca/camrin/portfolio.js

The milkbox class can be viewed at:

www.cspsolutions.ca/camrin/js/milkbox.js

Any help would be more than appreciated.

Thanks for your time,
Cam

[jscheuer1]

I'm getting:

Error: Milkbox.initialize is not a function

What I think you want is:

milkbox.initialize();

Easy mistake to make. But if you look at the end of the milkbox.js file, you see:

window.addEvent('domready', function(){ 
	milkbox = new Milkbox();
});

That means that Milkbox is the prototype function used to create instances of Milkbox. And that, in this particular case, milkbox is the instance.

Anyways, after changing the portfolio, I pasted this into the browser's address bar and hit enter:

javascript:void(milkbox.initialize())

and then it worked when I clicked on the thumbnail. This means that:

milkbox.initialize();

is the code you want. However, executing it onclick might not be soon enough, though it may. Give it a shot, change:

onclick="Milkbox.initialize()"

to:

onclick="milkbox.initialize();"

If that doesn't work, try onmousedown:

onmousedown="milkbox.initialize();"