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...?


<li rel="kids_beach.jpg">
<img src="http://localhost/stirling/public/content/thumbs/kids_beach_thumb.jpg" border="0" />
//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);
6 Years
Discussion Span
Last Post by 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.


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 .


Edited by Airshow: n/a


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!

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.