Rain Lover Posted June 29, 2012 Share Posted 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 Link to comment Share on other sites More sharing options...
astralaaron Posted June 29, 2012 Share Posted June 29, 2012 (edited) just give it an id and edit the style like you are doing to the 'large' id Edited June 29, 2012 by astralaaron Link to comment Share on other sites More sharing options...
davej Posted June 29, 2012 Share Posted 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} Link to comment Share on other sites More sharing options...
davej Posted June 30, 2012 Share Posted 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> Link to comment Share on other sites More sharing options...
dsonesuk Posted June 30, 2012 Share Posted 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> Link to comment Share on other sites More sharing options...
davej Posted July 1, 2012 Share Posted July 1, 2012 (edited) 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 Link to comment Share on other sites More sharing options...
dsonesuk Posted July 1, 2012 Share Posted 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()} Link to comment Share on other sites More sharing options...
davej Posted July 1, 2012 Share Posted July 1, 2012 (edited) 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 Link to comment Share on other sites More sharing options...
davej Posted July 3, 2012 Share Posted July 3, 2012 (edited) 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 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now