Jump to content
hectorone

Targeting Dynamically Created Thumbnails

Recommended Posts

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>

Share this post


Link to post
Share on other sites

The easiest way would probably be to store the URL of the big image in a custom attribute or property for the thumbnail.

Share this post


Link to post
Share on other sites

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;}

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...