Jump to content

Targeting Dynamically Created Thumbnails

hectorone

By hectorone
in JavaScript

Recommended Posts

hectorone Newbie

hectorone

Posted
Posted

Hello all, I'm currently building a simple photo / image gallery using html, javascript and css. The layout is pretty basic, comprising a bigPic, a couple of buttons to go to the next of prev img in the gallery and a line of thumbnails beneath them. I've got an xml file which contains all of the urls for the bigPics and thumbnails. When the body load, I have created a function that looks to see how many images are in the xml file and passes this through a for each loop and dynamically puts each thumbnail into it's own img tag. I've got most of the logic and functionality done, but the one thing I can't get me head around is how to set up the logic so that when someone clicks on a thumbnail, the corresponding bigPic is loaded into the div above. I've tried so many thing but I can't seem to be able to target the correct info that relates to each thumbnail. In trying to find an answer for this, I've read a few forum posts which say that doing this kind of thing might be better using jQuery. Would anyone agree with this? Here's my code; <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title></title> <script type="text/javascript"> if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); }else { xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }xmlhttp.open("GET","gallery.xml",false);xmlhttp.send();xmlDoc=xmlhttp.responseXML; x=xmlDoc.getElementsByTagName("image");i=0; function displayBigPic(){ artist=(x.getElementsByTagName("imgURL")[0].childNodes[0].nodeValue); document.getElementById("mainImg").src = artist;} function next() {if (i<x.length-1) { i++; } else { i = 0; } displayBigPic(); } function previous() {if (i == 0) { i = x.length-1; } else { i--; } displayBigPic();} function createThumbs(id, html, width, height, left, top){ for (var i = 0; 1<x.length;i++) { var thumb = document.createElement("img"); thumb.setAttribute("thumb",id); thumbsURL = (x.getElementsByTagName("thumbURL")[0].childNodes[0].nodeValue) thumb.style.width = "62px";thumb.style.height = "42px";thumb.style.background = "#FFF"; thumb.style.border = "2px solid #333";thumb.style.border = "1px solid #FFFF00";thumb.style.marginRight = "14px";thumb.style.float = "left";thumb.style.display = "block";thumb.style.backgroundImage = "url(" + thumbsURL + ")"; thumb.src = thumbsURL; thumb.onclick = function (){ /*Not sure how to correctly target the corresponding URL for the bigPic*/} document.getElementById("thumb_container").appendChild(thumb); } } </script></head> <body onload="displayBigPic(); createThumbs()"> <div id="gallery_wrapper"> <div id="bigPic"><img style="width:100%; height:100%;" id="mainImg" /></div> <button style="margin-top:10px; margin-left:25px;" onclick="previous()">Prev</button> <button style="margin-top:10px; margin-left:15px;" onclick="next()">Next</button> <div id="thumb_container"></div><!-- thumb_container end --> </div><!-- gallery_wrapper end --></body></html>

Link to comment
Share on other sites
dsonesuk w3schools Guru

dsonesuk

Posted
Posted

if the thumbnail images are named image01_thumb.jpg, image02_thumb.jpg, you could name the larger images image01.jpg, image02.jpg, then all you have to do is remove '_thumb' from thumbnail src, and use this for the larger image src thumb.onclick = function (){ displayLarge(this)} function displayLarge(elem){largesrc = elem.src.replace("_thumb","");largeimg=document.getElementById("mainImg").src=largesrc;}

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...