Question

I’m working on a little image gallery, where you’d roll over a small thumbnail, the larger image would display over it. Clicking on the image would load a full size version in an overlay.

http://shopcoobie.server303.com/shop/

The issue is with the larger image, the rollovers are working fine, but the script I have updates the href which points to the full size image only seems to work the first time I click the image.

$$('.thumbs img').each(function(s) {

$(s).observe('mouseover', function(e) {
    var el = e.target;
    var thumb = $(el).src;
    var large = $(el).alt;
    $(el).up(3).down(1).href = large;
    $(el).up(3).down(2).src = thumb;
    console.log((el).up(3).down(1).href);
    console.log(thumb);
 });
});

The console outputs the proper image reference, so it seems this should work (and partially does), Im just not sure why it only works once.

Thanks
Rich

Answer 1

I think the lightview plugin builds up its list of images first, then you change the src dynamically, and it doesn’t update. So try adding a call to Lightview.updateViews(); at the end of the mouseover handler above.

From Lightview:

Lightview.updateViews(): Force a reset of all Lightview
elements on the page. Most of the time
you won’t need to do this since
Lightview will pick up on newly
inserted elements automatically. After
updating existing elements it might be
required to call this function.

So yours is a case where it doesn’t automatically pick up the change.