Results 1 to 6 of 6

Thread: Highlight the active thumbnail in a slideshow

  1. #1
    Join Date
    Nov 2009
    Location
    Isfahan, Iran
    Posts
    229
    Thanks
    46
    Thanked 1 Time in 1 Post

    Default Highlight the active thumbnail in a slideshow

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Here's one way:

    Code:
    <!DOCTYPE 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, img.active {background:#00F;}
    </style>
    <script type="text/javascript">
    function enlarge(el){
    	document.getElementById('large').style.backgroundImage = 'url(' + el.getAttribute('data-image') + ')';
    	var tmbs = document.getElementById('thumbs').getElementsByTagName('img'), i = tmbs.length - 1;
    	for (i; i > -1; --i){
    		tmbs[i].className = '';
    	}
    	el.className = 'active';
    }
    </script>
    </head> 
    <body> 
    <div id="large"></div>  
    <div id="thumbs"> 
    <img class="active" src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="" onclick="enlarge(this);" data-image="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="enlarge(this);" data-image="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="enlarge(this);" data-image="http://lh4.googleusercontent.com/-4AMWSfi8q7A/Thc6haUv1QI/AAAAAAAAABE/oRdTWawPi_c/s800/image3.jpg">
    </div> 
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Rain Lover (07-10-2011)

  4. #3
    Join Date
    Nov 2009
    Location
    Isfahan, Iran
    Posts
    229
    Thanks
    46
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by jscheuer1 View Post
    Here's one way:

    Code:
    <!DOCTYPE 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, img.active {background:#00F;}
    </style>
    <script type="text/javascript">
    function enlarge(el){
    	document.getElementById('large').style.backgroundImage = 'url(' + el.getAttribute('data-image') + ')';
    	var tmbs = document.getElementById('thumbs').getElementsByTagName('img'), i = tmbs.length - 1;
    	for (i; i > -1; --i){
    		tmbs[i].className = '';
    	}
    	el.className = 'active';
    }
    </script>
    </head> 
    <body> 
    <div id="large"></div>  
    <div id="thumbs"> 
    <img class="active" src="http://lh3.googleusercontent.com/-hUXeHq5OxEo/Thc7hFFv3gI/AAAAAAAAABQ/Yh7omR8iwzI/s800/thumb1.jpg" alt="" onclick="enlarge(this);" data-image="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="enlarge(this);" data-image="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="enlarge(this);" data-image="http://lh4.googleusercontent.com/-4AMWSfi8q7A/Thc6haUv1QI/AAAAAAAAABE/oRdTWawPi_c/s800/image3.jpg">
    </div> 
    </body>
    </html>
    Perfect -- as always! Thanks, John!

  5. #4
    Join Date
    Nov 2009
    Location
    Isfahan, Iran
    Posts
    229
    Thanks
    46
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by jscheuer1 View Post
    Here's one way
    How about this one? Is it correct coding:

    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 imageHandler() {
            document.getElementById('large').style.backgroundImage = 'url(' + this.href + ')';
            setActiveLink(this);
    	return false;
    }
    function setActiveLink(link) {
    var links = document.getElementsByTagName('a');
    for (var i = 0; i < links.length; i++) {
            links[i].className = '';
    	}
    	link.className = 'active';
    }
    window.onload = function() {
    var links = document.getElementsByTagName('a');
    for (var i = 0; i < links.length; i++) {
            links[i].onclick = imageHandler;
    }
    }
    </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; border:0;}
    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>

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Yeah, that's OK. I'd go with something more like this:

    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;}
    #thumbs img {padding:2px; width:80px; height:60px; border-width:0;}
    #thumbs a:hover img, #thumbs 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>
    <script type="text/javascript">
    ;(function(){
    	var links = document.getElementById('thumbs').getElementsByTagName('a'),
    	large = document.getElementById('large').style, i = links.length;
    	function imageHandler() {
    	        large.backgroundImage = 'url(' + this.href + ')';
    	        setActiveLink(this);
    		return false;
    	}
    	function setActiveLink(link) {
    		i = links.length;
    		while(links[--i]) {
    		        links[i].className = '';
    		}
    		link.className = 'active';
    	}
    
    	while(links[--i]) {
    	        links[i].onclick = imageHandler;
    	}
    })();
    </script>
    </body>
    </html>
    Last edited by jscheuer1; 06-29-2012 at 03:48 PM. Reason: closing /body tag was out of place
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. The Following User Says Thank You to jscheuer1 For This Useful Post:

    Rain Lover (06-30-2012)

  8. #6
    Join Date
    Nov 2009
    Location
    Isfahan, Iran
    Posts
    229
    Thanks
    46
    Thanked 1 Time in 1 Post

    Default

    Thanks again!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •