Page 1 of 3 123 LastLast
Results 1 to 10 of 24

Thread: Combine Image Thumbnail Viewer II & Ultimate Fade-in slideshow

  1. #1
    Join Date
    Jan 2008
    Posts
    72
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default Combine Image Thumbnail Viewer II & Ultimate Fade-in slideshow

    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

  2. #2
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    Do you want the slideshow to run and when you hover over it, a bigger image to appear?
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  3. #3
    Join Date
    Jan 2008
    Posts
    72
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    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...

  4. #4
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    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.
    Last edited by Snookerman; 01-12-2009 at 09:41 PM. Reason: typo
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  5. #5
    Join Date
    Jan 2008
    Posts
    72
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    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

  6. #6
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    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.
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

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

    lio (01-05-2009)

  8. #7
    Join Date
    Jan 2008
    Posts
    72
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    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

  9. #8
    Join Date
    Jan 2008
    Posts
    72
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    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

  10. #9
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    2,023
    Thanks
    17
    Thanked 319 Times in 318 Posts
    Blog Entries
    3

    Default

    If you want us to be able to help you:
    Please post a link to the page on your site that contains the problematic script or attach your code so we can check it out.
    Eddy Proca
    I love Dropbox. Get it through my girlfriend's referral link (I reached my limit) and both you and her get 500 MB extra! Thanks and you're welcome!

  11. #10
    Join Date
    Jan 2008
    Posts
    72
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Default

    of course... here is the "prototype" :
    http://varianscuirs.com/cuirs_luxe/c...mes-pin-up.htm

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
  •