Jump to content

Style the active thumbnail in an image gallery


Rain Lover
 Share

Recommended Posts

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

Link to comment
Share on other sites

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}

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

<!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>

Link to comment
Share on other sites

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 by davej
Link to comment
Share on other sites

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()}

Link to comment
Share on other sites

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 by davej
Link to comment
Share on other sites

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 by davej
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...