The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Highlight the active thumbnail in a slideshow
RainLover
post Jul 8 2011, 03:20 PM
Post #1


Advanced Member
****

Group: Members
Posts: 191
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


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 8 2011, 05:59 PM
Post #2


.
********

Group: WDG Moderators
Posts: 6,167
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?)


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 8 2011, 06:36 PM
Post #3


.
********

Group: WDG Moderators
Posts: 6,167
Joined: 10-August 06
Member No.: 7



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.


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 9 2011, 12:15 PM
Post #4


.
********

Group: WDG Moderators
Posts: 6,167
Joined: 10-August 06
Member No.: 7



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


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post Jul 9 2011, 02:43 PM
Post #5


Advanced Member
****

Group: Members
Posts: 191
Joined: 16-November 09
Member No.: 10,346



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.

This post has been edited by RainLover: Jul 9 2011, 02:52 PM


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post Jul 9 2011, 02:50 PM
Post #6


Advanced Member
****

Group: Members
Posts: 191
Joined: 16-November 09
Member No.: 10,346



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.

This post has been edited by RainLover: Jul 9 2011, 02:56 PM


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jul 9 2011, 05:34 PM
Post #7


.
********

Group: WDG Moderators
Posts: 6,167
Joined: 10-August 06
Member No.: 7



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.


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post Jul 10 2011, 10:38 AM
Post #8


Advanced Member
****

Group: Members
Posts: 191
Joined: 16-November 09
Member No.: 10,346



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.

This post has been edited by RainLover: Jul 10 2011, 10:45 AM


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post Jun 28 2012, 03:29 PM
Post #9


Advanced Member
****

Group: Members
Posts: 191
Joined: 16-November 09
Member No.: 10,346



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>



--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 28 2012, 06:39 PM
Post #10


.
********

Group: WDG Moderators
Posts: 6,167
Joined: 10-August 06
Member No.: 7



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.


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post Jun 28 2012, 07:52 PM
Post #11


Advanced Member
****

Group: Members
Posts: 191
Joined: 16-November 09
Member No.: 10,346



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


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Jun 29 2012, 01:40 PM
Post #12


.
********

Group: WDG Moderators
Posts: 6,167
Joined: 10-August 06
Member No.: 7



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


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
RainLover
post Jun 30 2012, 03:28 AM
Post #13


Advanced Member
****

Group: Members
Posts: 191
Joined: 16-November 09
Member No.: 10,346



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!


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 30th October 2014 - 10:09 AM