Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ Client-side Scripting _ Highlight the active thumbnail in a slideshow
Posted by: 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>
<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
Posted by: 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?)
Posted by: 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.
Posted by: 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
Posted by: 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.
Posted by: 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.
Posted by: 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.
Posted by: 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.
Posted by: 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>
<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>
Posted by: 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.
Posted by: 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);}
}
}
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
links[i].onclick = function () {
reset(); this.className='active'; change(this.href);}
}
}
Posted by: 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.
Posted by: 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!
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)