Highlight the active thumbnail in a slideshow |
Highlight the active thumbnail in a slideshow |
RainLover |
Jul 8 2011, 03:20 PM
Post
#1
|
Advanced Member Group: Members Posts: 216 Joined: 16-November 09 Member No.: 10,346 |
Hi,
Here's the slideshow embed code: CODE <!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. I also like to avoid the inline JavaScript. Any feedback to improve the coding is appreciated! Best regards Mike |
Christian J |
Jul 8 2011, 05:59 PM
Post
#2
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
I'd loop through the IMG elements. First one loop that resets any previous highlighting, then a second loop that detects an onclick event, which in turn sets the large image URL and highlight styling of the clicked thumbnail.
(BTW any special reason to make the large image a CSS background instead of an IMG element?) |
RainLover |
Jun 28 2012, 03:29 PM
Post
#3
|
Advanced Member Group: Members Posts: 216 Joined: 16-November 09 Member No.: 10,346 |
I'd loop through the IMG elements. First one loop that resets any previous highlighting, then a second loop that detects an onclick event, which in turn sets the large image URL and highlight styling of the clicked thumbnail. Dear Christian, Sorry to dig out this old post. Is that what you mean: CODE <!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"> <script type="text/javascript"> function change(url) { document.getElementById('large').style.backgroundImage='url('+url+')';} function reset() { var links = document.getElementsByTagName('a'); for (var i = 0; i < links.length; i++) { links[i].className = ''; } } window.onload = function() { var links = document.getElementsByTagName('a'); for (var i = 0; i < links.length; i++) { links[i].onclick = function () { reset(); this.className='active'; change(this.href); return false;}; } } </script> <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;} a:hover img, a.active img {background:#00F;} </style> </head> <body> <div id="large"></div> <div id="thumbs"> <a class="active" href="http://lh5.googleusercontent.com/-ugFamEhbqPo/Thc6hoArbwI/AAAAAAAAABA/PFeHcJhR4Xw/s800/image1.jpg"><img src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt=""></a> <a href="http://lh3.googleusercontent.com/-u5BHGxpr0rg/Thc6hLbDRKI/AAAAAAAAAA8/IvQWzJBvqjg/s800/image2.jpg"><img src="http://lh3.googleusercontent.com/-JU5a-eDnOSg/Thc7g5UkwLI/AAAAAAAAABI/9aCyCMixWb4/s800/thumb2.jpg" alt=""></a> <a href="http://lh4.googleusercontent.com/-4AMWSfi8q7A/Thc6haUv1QI/AAAAAAAAABE/oRdTWawPi_c/s800/image3.jpg"><img src="http://lh4.googleusercontent.com/-TdbbNGFbDNk/Thc7g0IBSsI/AAAAAAAAABM/pxpntZaTVoQ/s800/thumb3.jpg" alt=""></a> </div> </body> </html> |
Christian J |
Jun 28 2012, 06:39 PM
Post
#4
|
. Group: WDG Moderators Posts: 9,656 Joined: 10-August 06 Member No.: 7 |
Is that what you mean: That should work, as long as there are no other links on the page except the ones used for the thumbnails. If there are other links you need to be more specific when defining the "links" variables. The "return false" and the semi-colon after the subsequent curly brace seem unnecessary. |
RainLover |
Jun 30 2012, 03:28 AM
Post
#5
|
Advanced Member Group: Members Posts: 216 Joined: 16-November 09 Member No.: 10,346 |
That should work, as long as there are no other links on the page except the ones used for the thumbnails. If there are other links you need to be more specific when defining the "links" variables. The "return false" and the semi-colon after the subsequent curly brace seem unnecessary. Thanks for the code review! |
Lo-Fi Version | Time is now: 26th April 2024 - 03:45 AM |