Style the active thumbnail in an image gallery

Rain Lover · June 29, 2012

Here's a sample gallery:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <title>Slideshow</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css">#large {width:448px; height:336px; background:#000 url(http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg) no-repeat center;}#thumbs {padding-top:12px; overflow:auto; white-space:nowrap; width:448px;}img {padding:1px; width:80px; height:60px;}img:hover {background:#00F;}</style></head> <body> <div id="large"></div>  <div id="thumbs"> <img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg)';"><img src="http://lh3.googleusercontent.com/-JU5a-eDnOSg/Thc7g5UkwLI/AAAAAAAAABI/9aCyCMixWb4/s800/thumb2.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh3.googleusercontent.com/-u5BHGxpr0rg/Thc6hLbDRKI/AAAAAAAAAA8/IvQWzJBvqjg/s800/image2.jpg)';"><img src="http://lh4.googleusercontent.com/-TdbbNGFbDNk/Thc7g0IBSsI/AAAAAAAAABM/pxpntZaTVoQ/s800/thumb3.jpg" alt="" onclick="document.getElementById('large').style.backgroundImage='url(http://lh4.googleusercontent.com/-4AMWSfi8q7A/Thc6haUv1QI/AAAAAAAAABE/oRdTWawPi_c/s800/image3.jpg)';"></div> </body></html>

I wonder how I can highlight the active thumbnail so its background remains blue until I click another one. Thanks in advance!Mike

astralaaron · June 29, 2012

just give it an id and edit the style like you are doing to the 'large' id

Edited June 29, 2012 by astralaaron

davej · June 29, 2012

This seems to work:

<html><head><title>Slideshow</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css">#large {width:448px;	    height:336px;	    background:#000 url(http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg) no-repeat center;	   }#thumbs {padding-top:12px; overflow:auto; white-space:nowrap; width:448px;	   }img {padding:1px; width:80px; height:60px;}img:hover {background:#00F;}</style><script type="text/javascript" src="jonerror.js"></script><script type="text/javascript">window.onload=function(){$('p1').src='http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg';$('p2').src='http://lh3.googleusercontent.com/-JU5a-eDnOSg/Thc7g5UkwLI/AAAAAAAAABI/9aCyCMixWb4/s800/thumb2.jpg';$('p3').src='http://lh4.googleusercontent.com/-TdbbNGFbDNk/Thc7g0IBSsI/AAAAAAAAABM/pxpntZaTVoQ/s800/thumb3.jpg';$('p1').onclick=f1;$('p2').onclick=f2;$('p3').onclick=f3;//alert('Init success');}function f1(){$('large').style.backgroundImage="url('http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg')";setborder(this);}function f2(){$('large').style.backgroundImage="url('http://lh3.googleusercontent.com/-u5BHGxpr0rg/Thc6hLbDRKI/AAAAAAAAAA8/IvQWzJBvqjg/s800/image2.jpg')";setborder(this);}function f3(){$('large').style.backgroundImage="url('http://lh4.googleusercontent.com/-4AMWSfi8q7A/Thc6haUv1QI/AAAAAAAAABE/oRdTWawPi_c/s800/image3.jpg')";setborder(this);}function $(id){return document.getElementById(id);}function setborder(e){$('p1').style.backgroundColor='';$('p2').style.backgroundColor='';$('p3').style.backgroundColor='';e.style.backgroundColor='#00F';}</script></head><body><div id="large"></div> <div id="thumbs"><img id="p1" alt="p1" /><img id="p2" alt="p2" /><img id="p3" alt="p3" /></div></body></html>  jonerror.js is a file containing://pre-load the javascript error handlerwindow.onerror = function(m, u, l){  alert('Javascript Error: '+m+'\nURL: '+u+'\nLine Number: '+l);  return true; //supress fallback error-msg if true}

davej · June 30, 2012

Another version:

<html><head><title>Slideshow</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css">#large {width:448px;	    height:336px;	    background:#000 url(http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg) no-repeat center;	   }#thumbs {padding-top:12px; overflow:auto; white-space:nowrap; width:448px;	   }img {padding:1px; width:80px; height:60px;}img:hover {background:#00F;}</style><script type="text/javascript" src="jonerror.js"></script><script type="text/javascript">var full= new Array();var thumb= new Array();var p= new Array();var pmax=2;var run=false;var tmrcnt=0;var tmr;full[0]="url('http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg')";full[1]="url('http://lh3.googleusercontent.com/-u5BHGxpr0rg/Thc6hLbDRKI/AAAAAAAAAA8/IvQWzJBvqjg/s800/image2.jpg')";full[2]="url('http://lh4.googleusercontent.com/-4AMWSfi8q7A/Thc6haUv1QI/AAAAAAAAABE/oRdTWawPi_c/s800/image3.jpg')";thumb[0]='http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg';thumb[1]='http://lh3.googleusercontent.com/-JU5a-eDnOSg/Thc7g5UkwLI/AAAAAAAAABI/9aCyCMixWb4/s800/thumb2.jpg';thumb[2]='http://lh4.googleusercontent.com/-TdbbNGFbDNk/Thc7g0IBSsI/AAAAAAAAABM/pxpntZaTVoQ/s800/thumb3.jpg';p[0]='p1';p[1]='p2';p[2]='p3';window.onload=function(){$('p1').src=thumb[0];$('p2').src=thumb[1];$('p3').src=thumb[2];$('p1').onclick=f1;$('p2').onclick=f2;$('p3').onclick=f3;$('ssbtn').onclick=fss;//alert('Init success');}function f1(){$('large').style.backgroundImage=full[0];setborder(this);}function f2(){$('large').style.backgroundImage=full[1];setborder(this);}function f3(){$('large').style.backgroundImage=full[2];setborder(this);}function $(id){return document.getElementById(id);}function setborder(e){$('p1').style.backgroundColor='';$('p2').style.backgroundColor='';$('p3').style.backgroundColor='';e.style.backgroundColor='#00F';}var start1;var run = false;var tmrcnt = 0;var tmr;function fss(){if (!run){tmrcnt=0;timer();run=true;$('ssbtn').style.backgroundColor='#77F';}else{clearTimeout(tmr);run = false;$('ssbtn').style.backgroundColor='';}}function timer(){$(p[tmrcnt]).style.backgroundColor='';tmrcnt = tmrcnt + 1;if (tmrcnt > pmax){tmrcnt = 0;}$('large').style.backgroundImage=full[tmrcnt];$(p[tmrcnt]).style.backgroundColor='#00F';tmr=setTimeout("timer()",2000);// milliseconds}</script></head><body><div id="large"></div> <div id="thumbs"><img id="p1" /><img id="p2" /><img id="p3" /></div><input type="button" id="ssbtn" value="Slideshow"/></body></html>

dsonesuk · June 30, 2012

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Slideshow</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css">#large {width:448px; height:336px; background:#000 url(http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg) no-repeat center;}#thumbs {padding-top:12px; overflow:auto; white-space:nowrap; width:448px;}img {padding:1px; width:80px; height:60px;}img:hover {background:#00F;}</style><script type="text/javascript">/*<![CDATA[*//*---->*/var imageArray=['http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg', 'http://lh3.googleusercontent.com/-u5BHGxpr0rg/Thc6hLbDRKI/AAAAAAAAAA8/IvQWzJBvqjg/s800/image2.jpg','http://lh4.googleusercontent.com/-4AMWSfi8q7A/Thc6haUv1QI/AAAAAAAAABE/oRdTWawPi_c/s800/image3.jpg'];function dothis(elem){var thumbs_parent = document.getElementById('thumbs');var thumbs = thumbs_parent.getElementsByTagName("img");for(i=0;i<thumbs.length;i++)    {    if(elem.src==thumbs[i].src)        {        document.getElementById('large').style.backgroundImage='url('+imageArray[i]+')';        }    thumbs[i].style.backgroundColor='';    }elem.style.backgroundColor ='red';}/*--*//*]]>*/</script></head><body><div id="large"></div>  <div id="thumbs"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="" onclick="dothis(this);"><img src="http://lh3.googleusercontent.com/-JU5a-eDnOSg/Thc7g5UkwLI/AAAAAAAAABI/9aCyCMixWb4/s800/thumb2.jpg" alt="" onclick="dothis(this);"><img src="http://lh4.googleusercontent.com/-TdbbNGFbDNk/Thc7g0IBSsI/AAAAAAAAABM/pxpntZaTVoQ/s800/thumb3.jpg" alt="" onclick="dothis(this);"></div></body></html>

davej · July 1, 2012

If you have a div with an id of "thumbs" how would you add an arbitrary number of thumbnail images inside that div using JS? I tried innerHTML but it didn't entirely work. Is this a job for createElement or addChild?

<script type="text/javascript">var thumb= new Array();var p= new Array();var pmax;var i;thumb[0]='http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg';thumb[1]='http://lh3.googleusercontent.com/-JU5a-eDnOSg/Thc7g5UkwLI/AAAAAAAAABI/9aCyCMixWb4/s800/thumb2.jpg';thumb[2]='http://lh4.googleusercontent.com/-TdbbNGFbDNk/Thc7g0IBSsI/AAAAAAAAABM/pxpntZaTVoQ/s800/thumb3.jpg';pmax=full.length-1;window.onload=function(){for(i=0 ; i<=pmax ; i++){p[i] = "p" + i;$('thumbs').innerHTML+='<img id="' + p[i] + '"/>';$(p[i]).src=thumb[i];$(p[i]).onclick=f;alert(p[i] + " was created");}}</script></head><body><div id="large"></div><div id="thumbs"></div><input type="button" id="ssbtn" value="Slideshow"/></body>

Edited July 1, 2012 by davej

dsonesuk · July 1, 2012

var imageArray=['http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg', 'http://lh3.googleusercontent.com/-u5BHGxpr0rg/Thc6hLbDRKI/AAAAAAAAAA8/IvQWzJBvqjg/s800/image2.jpg','http://lh4.googleusercontent.com/-4AMWSfi8q7A/Thc6haUv1QI/AAAAAAAAABE/oRdTWawPi_c/s800/image3.jpg'];var thumbArray=['http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg','http://lh3.googleusercontent.com/-JU5a-eDnOSg/Thc7g5UkwLI/AAAAAAAAABI/9aCyCMixWb4/s800/thumb2.jpg','http://lh4.googleusercontent.com/-TdbbNGFbDNk/Thc7g0IBSsI/AAAAAAAAABM/pxpntZaTVoQ/s800/thumb3.jpg'];function dothis(elem){var thumbs_parent = document.getElementById('thumbs');var thumbs = thumbs_parent.getElementsByTagName("img");for(i=0;i<thumbs.length;i++)    {    if(elem.src==thumbs[i].src)        {        document.getElementById('large').style.backgroundImage='url('+imageArray[i]+')';        }    thumbs[i].style.backgroundColor='';    }elem.style.backgroundColor ='red';}function create_thumbs()    {    var thumbs_parent = document.getElementById('thumbs');    var thumb_image;    for(i=0;i<thumbArray.length;i++)        {        thumb_image=document.createElement("img")        thumb_image.src=thumbArray[i];        thumb_image.onclick=function(){dothis(this)};        thumb_image.id="p"+i;        thumb_image.alt="";        thumbs_parent.appendChild(thumb_image);        }    }window.onload=function(){create_thumbs()}

davej · July 1, 2012

Thanks Dsonesuk! I've dumbed that down and produced this:

<html> <head> <title>Slideshow</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css">#large {width:448px;         height:336px;         background:#000 no-repeat center;       }#thumbs {padding-top:12px; overflow:auto; white-space:nowrap; width:448px;       }img {padding:1px; width:80px; height:60px;}img:hover {background:#00F;}</style><script type="text/javascript" src="jonerror.js"></script><script type="text/javascript" src="jphotolist.js"></script><script type="text/javascript">var p= new Array();var plen;var run=false;var tmrcnt=0;var tmr;var i; window.onload=function(){plen=full.length;var thumb_img;for(i=0 ; i<plen ; i++){p[i] = "p" + i;thumb_img=document.createElement("img")thumb_img.src=thumb[i];thumb_img.onclick=f;thumb_img.id="p"+i;thumb_img.alt="p"+i;$('thumbs').appendChild(thumb_img);}$('ssbtn').onclick=btnf;$('large').style.backgroundImage=full[0];//alert('Init success');}function f(){if (!run){i=0;while(i<plen){if(this.id==p[i]){$('large').style.backgroundImage=full[i];setborder(this);}i++;}}}function $(id){return document.getElementById(id);}function setborder(e){var i;for(i=0 ; i<plen ; i++){$(p[i]).style.backgroundColor='';}e.style.backgroundColor='#00F';}var run = false;var tmrcnt;var tmr; function btnf(){if (!run){for (i=0 ; i<plen ; i++){$(p[i]).style.backgroundColor='';}tmrcnt=plen-1;timer();run=true;$('ssbtn').style.backgroundColor='#77F';}else{clearTimeout(tmr);run=false;$('ssbtn').style.backgroundColor='';}} function timer(){$(p[tmrcnt]).style.backgroundColor='';tmrcnt++;if (tmrcnt >= plen){tmrcnt=0;}$('large').style.backgroundImage=full[tmrcnt];$(p[tmrcnt]).style.backgroundColor='#00F';tmr=setTimeout("timer()",2000);// milliseconds}</script></head>  <body>  <div id="large"></div>  <div id="thumbs"></div> <input type="button" id="ssbtn" value="Slideshow"/> </body></html>

Where the image list is a separate file named jphotolist.js...

var full= new Array();var thumb= new Array(); full[0]="url('http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg')";full[1]="url('http://lh3.googleusercontent.com/-u5BHGxpr0rg/Thc6hLbDRKI/AAAAAAAAAA8/IvQWzJBvqjg/s800/image2.jpg')";full[2]="url('http://lh4.googleusercontent.com/-4AMWSfi8q7A/Thc6haUv1QI/AAAAAAAAABE/oRdTWawPi_c/s800/image3.jpg')";thumb[0]='http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg';thumb[1]='http://lh3.googleusercontent.com/-JU5a-eDnOSg/Thc7g5UkwLI/AAAAAAAAABI/9aCyCMixWb4/s800/thumb2.jpg';thumb[2]='http://lh4.googleusercontent.com/-TdbbNGFbDNk/Thc7g0IBSsI/AAAAAAAAABM/pxpntZaTVoQ/s800/thumb3.jpg';

Edited July 1, 2012 by davej

davej · July 3, 2012

So does image caching occur if you simply read that image before it is needed? What if I wanted to prefetch the next few images as the slideshow is running? Would I simply add...

var fullpreload = new Image();function timer(){$(p[tmrcnt]).style.backgroundColor='';tmrcnt++;if (tmrcnt >= plen){tmrcnt=0;}$('large').style.backgroundImage="url('" + full[tmrcnt] + "')";$(p[tmrcnt]).style.backgroundColor='#00F';tmr=setTimeout("timer()",2000);// millisecondsif (tmrcnt+1 >= plen){fullpreload.src = full[tmrcnt+1];}if (tmrcnt+2 >= plen){fullpreload.src = full[tmrcnt+2];}}

...Or maybe I need to declare and use fullpreload1 and fullpreload2 ?

Edited July 3, 2012 by davej

Sign In

Style the active thumbnail in an image gallery

Recommended Posts

Rain Lover

Link to comment

Share on other sites

astralaaron

Link to comment

Share on other sites

davej

Link to comment

Share on other sites

davej

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

davej

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

davej

Link to comment

Share on other sites

davej

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity