<li> REL attribute not working...

[lifeworks]

Hi

Im trying to make a script which when I click on the list element... it will replace a big image with anotehr picture. The list element is a thumbnail... and I want to swop the big image with the big version of the thumbnail.

Each <li> has a rel attribute... but while I can pull out each <li> from the list, for some reason the following code, yields an 'undefined' value... instead of the big-image-path...?

Help!

<li rel="kids_beach.jpg">
<img src="http://localhost/stirling/public/content/thumbs/kids_beach_thumb.jpg" border="0" />
</li>

//getting all <li> from the list of thumbnails
var all_items = list.getElementsByTagName('li');
	
for(i in all_items)
{
    //this should set the value of the big image
    //to the value of the rel attribute of the thumbnail list item
    all_items[i].onclick = function(){
    main_image.src = dynamicImg('public/content/images/' + all_items[i].rel);
    };
}

[Airshow]

LifeWorks,

Trouble is that although main_image remains available to the anonymous function, i will be one greater than the index of the last element in all_items by the time the anonymous function executes. However, judicious use if this (and some tidying) will overcome the problem.

Try:

var i, all_items = list.getElementsByTagName('li');
function show_large_img() { main_image.src = dynamicImg('public/content/images/' + this.rel); };
for(i=0; i<all_items.length; i++) { all_items[i].onclick = show_large_img; }

If you find that works in some browsers and not others (I can't recall ever trying this with rel), then try this.getAttribute('rel') in place of this.rel .

Airshow

[lifeworks]

Hi Airshow

That worked perfectly, I used the getAttribute('rel') - currently using an updated version of Chrome and this.rel didn't seem to work.

Thanks for the assist!