Results 1 to 5 of 5

Thread: Ultimate Fade-In Slideshow - how to delay start

  1. #1
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade-In Slideshow - how to delay start

    1) Script Title: Ultimate Fade-In Slideshow (v2.1)

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

    3) Describe problem: On this page, I have a splash screen (in an absolutely positioned DIV) fading out and then revealing the regular page (in a DIV called #container), which is running a slideshow. All's well, except that I'd like for the slideshow to not begin until the #container DIV has appeared. Otherwise, the 1st slide has started before the page is even showing, and the timing of it isn't right. I'm an utter newbie at this and any help would be appreciated.

    The page in question: http://ragandboneshop.com/internal/LIAB/

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,025
    Thanks
    44
    Thanked 3,210 Times in 3,172 Posts
    Blog Entries
    12

    Default

    Get rid of this:

    Code:
    <script type="text/javascript" src="jquery.min.js"></script>
    You only need one copy of jQuery for the page and 1.4.2 is better. And the slide show will run just fine on it.

    Also, get rid of:

    Code:
      <script type="text/javascript">
    
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [543, 500], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["randoms/pic-2.png", "", "", ""],
    		["randoms/pic-1.png", "", "", ""],
    		["randoms/pic-3.png", "", "", ""],
    		["randoms/pic-5.jpg", "", "", ""],
    		["randoms/pic-4.png", "", "", ""],
    		["randoms/pic-6.png", "", "", ""] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:4000, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 600, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: ""
    })
    
    </script>
    We'll use its code elsewhere. Replace this:

    Code:
    <script type="text/javascript">
    $(function(){
    $('#container').hide();
    $('#apDiv1').hide();
    $('#apDiv1').fadeIn(2800)
    });
    $(function(){
       setTimeout(function() {
         $("#apDiv1").fadeOut(2800, function() {
         $("#container").fadeIn();
      });
     }, 3000);
    });
    </script>
    with this:

    Code:
    <script type="text/javascript">
    jQuery(function($){
    $('#container').hide();
    $('#apDiv1').hide();
    $('#apDiv1').fadeIn(2800)
       setTimeout(function() {
         $("#apDiv1").fadeOut(2800, function() {
         $("#container").fadeIn();
    	var mygallery=new fadeSlideShow({
    		wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    		dimensions: [543, 500], //width/height of gallery in pixels. Should reflect dimensions of largest image
    		imagearray: [
    			["randoms/pic-1.png", "", "", ""],
    			["randoms/pic-2.png", "", "", ""],
    			["randoms/pic-3.png", "", "", ""],
    			["randoms/pic-5.jpg", "", "", ""],
    			["randoms/pic-4.png", "", "", ""],
    			["randoms/pic-6.png", "", "", ""] //<--no trailing comma after very last image element!
    		],
    		displaymode: {type:'auto', pause:4000, cycles:0, wraparound:false},
    		persist: false, //remember last viewed slide and recall within same session?
    		fadeduration: 600, //transition duration (milliseconds)
    		descreveal: "ondemand",
    		togglerid: ""
    	});
      });
     }, 3000);
    });
    </script>
    That's it. I even restored what I imagine to be the desired order of the slides, starting with 1 now instead of 2. Feel free to change that if you like.
    - 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:

    ragandboneshop (06-03-2010)

  4. #3
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    That was incredibly helpful and did the trick. Thank you.

    The only undesirable side effect is that when the splash page fades out and the slideshow begins, it fades uup from black, whereas before it was white. I can't figure out what's causing the black.

    Revised page is here: http://ragandboneshop.com/internal/LIAB/

    Never mind: problem solved. Answer was here: http://www.dynamicdrive.com/forums/s...ad.php?t=48665

    Again, many thanks.
    Last edited by ragandboneshop; 06-03-2010 at 08:27 PM. Reason: Found answer in forum.

  5. #4
    Join Date
    Nov 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Delay single images

    Hi there, I would like a different time delay for 6 images so they fade into another image at a different interval from each other.

    I used: http://www.dynamicdrive.com/dynamici...nslideshow.htm and the images work fine with the fade but fade at the same time.

    What do I need to add to the code to make each image appear with a different time delay?

    If it helps this is what I have in the <head> now trying with two images:

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

    <script type="text/javascript" src="fadeslideshow.js">

    /***********************************************
    * Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/

    </script>

    <script type="text/javascript">

    var mygallery=new fadeSlideShow({
    wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    dimensions: [200, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
    imagearray: [
    ["images/hoverover_images/swap_women2.jpg", "http://www.panesarsimone.com/collection_women/index.html", "_self"],
    ["images/hoverover_images/swap_women1.jpg", "http://www.panesarsimone.com/collection_women/index.html", "_self"],
    ],
    displaymode: {type:'auto', pause:3000, cycles:0, wraparound:false},
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 500, //transition duration (milliseconds)
    descreveal: "ondemand",
    togglerid: ""
    })

    var mygallery=new fadeSlideShow({
    wrapperid: "fadeshow2", //ID of blank DIV on page to house Slideshow
    dimensions: [200, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
    imagearray: [
    ["images/colour_blocks/mustard.gif"],
    ["images/colour_blocks/ecru.gif"],
    ],
    displaymode: {type:'auto', pause:3000, cycles:0, wraparound:false},
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 500, //transition duration (milliseconds)
    descreveal: "ondemand",
    togglerid: ""
    })

    </script>


    And this is what I have in the <body>
    <div id="fadeshow1"></div>
    <div id="fadeshow2"></div>

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,025
    Thanks
    44
    Thanked 3,210 Times in 3,172 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by zalia View Post
    Hi there, I would like a different time delay for 6 images so they fade into another image at a different interval from each other.

    I used: http://www.dynamicdrive.com/dynamici...nslideshow.htm and the images work fine with the fade but fade at the same time.

    What do I need to add to the code to make each image appear with a different time delay?
    Code:
    var mygallery=new fadeSlideShow({
    wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    dimensions: [200, 200], //width/height of gallery in pixels. Should reflect dimensions of largest image
    imagearray: [
    ["images/hoverover_images/swap_women2.jpg", "http://www.panesarsimone.com/collection_women/index.html", "_self"],
    ["images/colour_blocks/mustard.gif"],
    ["images/hoverover_images/swap_women1.jpg", "http://www.panesarsimone.com/collection_women/index.html", "_self"],
    ["images/hoverover_images/menswear_swap1.jpg"],
    ["images/colour_blocks/ecru.gif"],
    ["images/hoverover_images/menswear_swap2.jpg"] // <-- No comma after last entry!
    ],
    speeds: [1000, 3000, 2000, 4000, 3000, 1500],
    displaymode: {type:'auto', pause:3000, cycles:0, wraparound:false},
    persist: false, //remember last viewed slide and recall within same session?
    fadeduration: 500, //transition duration (milliseconds)
    descreveal: "ondemand",
    togglerid: "",
    onslide: function(c, i){
    this.setting.displaymode.pause = this.setting.speeds[i];
    }
    })
    Don't miss the added comma (red) after the togglerid entry.


    Also, I noticed a couple of things -

    1. You have a comma after the last entry in your image array:

      Code:
      imagearray: [
      ["images/colour_blocks/mustard.gif"],
      ["images/colour_blocks/ecru.gif"],
      ],
      That will cause an error in some browsers.


    2. Your copy of the script at:

      http://www.panesarsimone.com/fadeslideshow.js

      has become corrupt. It has a reference to the Templates folder throughout. This will cause it not to point to the correct folder for the images or links used with them. Get a fresh copy of the script from the demo page.
    - John
    ________________________

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

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
  •