Combine Image Thumbnail Viewer II & Ultimate Fade-in slideshow

**lio** · 01-05-2009, 12:13 PM

1) Script Title:
Image Thumbnail Viewer II
Ultimate Fade-in slideshow (v1.51)

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamici...thumbnail2.htm
http://www.dynamicdrive.com/dynamici...nslideshow.htm

3) Describe problem:
I'd like to combine the 2 scripts : slideshow when I click on thumbnail images

Can somebody help me ?

Merci and happy new year

**Snookerman** · 01-05-2009, 12:23 PM

Do you want the slideshow to run and when you hover over it, a bigger image to appear?

**lio** · 01-05-2009, 12:28 PM

I would like to run a slideshow 1 when you hover on the the thumnail 1, a slideshow 2 when you hover the thumbnail 2, etc...

**Snookerman** · 01-05-2009, 01:31 PM

I made this with jQuery instead.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content= "text/html; charset=iso-8859-1">
        <title>Slideshow</title>
        <script type="text/javascript" src= "http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js">
        </script>
        <script type="text/javascript" src= "http://malsup.com/jquery/cycle/lite/jquery.cycle.lite.min.js?v1.0">
        </script>
        <script type="text/javascript">
            $(function(){
                $('#thumbs img').css({
                    'height': '200px'
                });
                $('.slide').cycle();
                $('.slide').hide();
                $('#thumbs img').hover(function(){
                    $('#' + $(this).attr('name')).show();
                }, function(){
                    $('#' + $(this).attr('name')).hide();
                });
            });
        </script>
    </head>
    <body>
        <div id="thumbs">
	    <img name="slide1" src= "http://www.gamerflicks.com/images/uploads/ghostbusters_logo.gif">
	    <img name="slide2" src= "http://www.cracked.com/blog/wp-content/uploads/2008/05/ghostbusters2.jpg">
	    <img name="slide3" src= "http://members.tripod.com/~TheDorkboy/ghostbusters/gb3logo.gif">
        </div>
        <div>
            <div id="slide1" class="slide">
		<img src= "http://www.airportdirecttravel.co.uk/live/Portals/10/Turkey/Gulet-200x200.jpg">
		<p>Some text that will be in the slideshow</p>
		<img src= "http://www.bighappyfaces.com/happy-face-happyface-smiley-200x200.gif">
		<img src= "http://aumaan.no-ip.org/Icons/icon%20-%20200x200%20-%20hot%20rod.gif">
            </div>
            <div id="slide2" class="slide">
		<span><img src= "http://davidnaylor.org/temp/thunderbird-logo-200x200.png">Image with text</span>
		<img src= "http://davidnaylor.org/temp/firefox-logo-200x200.png">
		<img src= "http://markcarson.com/images/Sunbird-4-200x200.png">
            </div>
            <div id="slide3" class="slide">
		<img src= "http://www.soton.ac.uk/~fangohr/research/vortex1/mbg/small_sph_200x200.gif">
		<img src= "http://www.boingboing.net/images/_programs_fa_features_2005_06_clowes_200x200.jpg">
		<img src= "http://img174.imageshack.us/img174/4823/itachixd6.png">
            </div>
        </div>
    </body>
</html>

What you need to make sure is that the elements in the "thumbs" div have the same name as the slideshows they will show. For example the first image with the name "slide1" will show the first slideshow with the id "slide1". You can put anything you want as thumbnails or as slides, not just images. All elements in containers with the "slide" class will be treated as a slide. All elements inside the "thumbs container will work as thumbs as long as the have the correct name. You can also take a look at the plugin I used for more settings for the slideshow:
http://malsup.com/jquery/cycle/lite/

Good luck and ask if you need any help or explaining.

**lio** · 01-05-2009, 03:32 PM

Thanks a lot, it is exactly was I wanted to have

I will adapt it to a website.

One question : it works well but needs with IE7 to authorize the active-X controls when you arrive on this page ; will all people do it or go away

and is there another solution

**Snookerman** · 01-05-2009, 03:48 PM

You're welcome!

You don't have to worry about the active-x message in IE. You only get that when you view pages with JavaScript offline. When you upload your page to the server you won't get that warning.

**lio** · 01-09-2009, 11:26 AM

Hello

So it works well, but I have some problems when I try to change some things, particulary in jquery-1.2.6.min.js & jquery.cycle.lite.min.js?v1.0

1) If I want to change from the "mouseover" to the activated "click" on the thumbs, with slideshow pause when onMouseover on the image of the slideshow, how can I change that ?
2) When I try to split the thumbs in 2 different div, it does not work anymore ; is it possible to have this ?
3) I have put the slideshow in a div, but the relative position of the slideshow is... bizarre : not in the center when I put it in the center, etc... ??

Merci

**lio** · 01-12-2009, 08:45 PM

Well, I have found how to keep the enlarged image when I put the mouse away from a thumb

<script type="text/javascript">
$(function(){
$('#thumbs img').css({
'height': '90px'
});
$('.slide').cycle();
$('.slide').hide();
$('#thumbs img').hover(function(){
$('#' + $(this).attr('name')).show();
}, function(){
$('#' + $(this).attr('name')).show();
});
});
</script>

BUT after the slideshow corresponding to the last thumb it is no more possible to come back to another slideshow