Help - Search - Members - Calendar
Full Version: Highlight the active thumbnail in a slideshow
HTMLHelp Forums > Programming > Client-side Scripting
RainLover
Jul 8 2011, 03:20 PM
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
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?)
Christian J
Jul 8 2011, 06:36 PM
A better solution might be to create ordinary thumbnail links to the large images. Then you can use the CSS :focus pseudo-class to highlight the current thumbnail image, thus saving the reset loop. As a bonus the gallery will work with keyboard navigation, and even without javascript.
Christian J
Jul 9 2011, 12:15 PM
QUOTE(Christian J @ Jul 9 2011, 01:36 AM) *

use the CSS :focus pseudo-class to highlight the current thumbnail image

This is buggy in IE8, but here's a fix: http://haslayout.net/css/Ignored--focus-Bug
RainLover
Jul 9 2011, 02:43 PM
QUOTE(Christian J @ Jul 8 2011, 05:59 PM) *

any special reason to make the large image a CSS background instead of an IMG element?


Dear Christian,

Thanks for the answer!
The only reason is I couldn't find a way to center images.
RainLover
Jul 9 2011, 02:50 PM
QUOTE(Christian J @ Jul 8 2011, 06:36 PM) *

A better solution might be to create ordinary thumbnail links to the large images. Then you can use the CSS :focus pseudo-class to highlight the current thumbnail image, thus saving the reset loop. As a bonus the gallery will work with keyboard navigation, and even without javascript.


Seems perfect! But I really don't know how to put this great idea into practice. I'd be grateful if you could help me with a sample code.
Christian J
Jul 9 2011, 05:34 PM
QUOTE(RainLover @ Jul 9 2011, 09:50 PM) *

I really don't know how to put this great idea into practice.

Which part are you having trouble with?

QUOTE
I couldn't find a way to center images

Just use CSS "text-align: center" on the parent block level element.
RainLover
Jul 10 2011, 10:38 AM
QUOTE(Christian J @ Jul 9 2011, 05:34 PM) *

Which part are you having trouble with?


I don't know how to open the linked thumbnails in the top div.
RainLover
Jun 28 2012, 03:29 PM
QUOTE(Christian J @ Jul 8 2011, 05:59 PM) *

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
QUOTE(RainLover @ Jun 28 2012, 10:29 PM) *

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 28 2012, 07:52 PM
QUOTE(Christian J @ Jun 28 2012, 06:39 PM) *

The "return false" and the semi-colon after the subsequent curly brace seem unnecessary.


If I remove "return false", the whole page navigates to the "href" URL:

CODE
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);}
}
}
Christian J
Jun 29 2012, 01:40 PM
QUOTE(RainLover @ Jun 29 2012, 02:52 AM) *

If I remove "return false", the whole page navigates to the "href" URL:

You're right. blush.gif
RainLover
Jun 30 2012, 03:28 AM
QUOTE(Christian J @ Jun 28 2012, 06:39 PM) *

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!
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2024 Invision Power Services, Inc.