Updating target href problem

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.