I am creating a gallery of images and found some code that sorta works for my needs. I am using CSS and Javascript. My thumbnails are listed in <LI> tags and when clicked on javascript is to change the full sized image and changes the css on the clicked image to let the user know which thumbnail is selected.
I split the <ul> between two div tags to take advantage of background-image capabilities. I have one image for the thumb and another for the full size (i.e. -- image1_tn.jpg and image1_fs.jpg).
How would I modify the following code to get the full size image (in a folder titled 'fs') to replace when the thumbnail (in a folder titled 'tn')?
Thanks!
Aus2Srq
<html><head><style type="text/css">#thumb { float: left; background-image: url(images/gallery/tn_back.png); height: 267px; width: 256px;}#thumb ul { list-style:none; padding:5px; margin: 25px 25px 0px 0px; width:195px; float:right; height:200px; overflow:auto; }#thumb ul li { display:inline; width:50px; height:50px; float:left; margin:0 4px 4px 0; border:1px solid #444; cursor:pointer;}#thumb ul li img { display:block; width:50px; height:50px;}#col_image ul li.click i img.default { padding: 25px 25px 0px 0px; width:auto; height:auto; }#thumb ul li.off {display:none;}#thumb ul li.click { border-color:#fc0; background:#f8f8f8; cursor:default;}#col_image ul li.click i { position:relative; left:0; top:0; width:545px; height:355px; }#col_image ul li.click i img { margin:5px auto 0 auto; width:auto; height:auto; }</style><script language="javascript">clickMenu = function(menu) { var getEls = document.getElementById(menu).getElementsByTagName("LI"); var getAgn = getEls; for (var i=0; i<getEls.length; i++) { getEls[i].onclick=function() { for (var x=0; x<getAgn.length; x++) { getAgn[x].className=getAgn[x].className.replace("click", ""); } this.className+=" click"; } } }</script></head><body onload="clickMenu('thumb')"><div id="thumb"> <ul> <li><i><img src="images/gallery/tn/image1.jpg" title="" alt="" /></i></li> <li><i><img src="images/gallery/tn/image2.jpg" title="" alt="" /></i></li> <li><i><img src="images/gallery/tn/image3.jpg" title="" alt="" /></i></li></ul> </div><!-- End thumb //--> <div id="fullsize_image"> <ul> <li class="click"><i><img class="default" src="images/gallery/fs/image1_fs.jpg" /></i></li> </ul> </div><!-- End fullsize_image //--></body></html>
Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.
I am not sure I understand how the layout is to look, but perhaps this will work (or at least be a good start)...
I hope this helps!
oceanbeach
Open in new window