Results 1 to 3 of 3

Thread: Ultimate Fade-in slideshow (v2.1) change default image on completion of rotation.

  1. #1
    Join Date
    Jan 2010
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade-in slideshow (v2.1) change default image on completion of rotation.

    1) Script Title: Ultimate Fade-in slideshow (v2.1)

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

    3) Describe problem:
    I am a newbie at slideshows. I have added the Ultimate Fade-in slideshow on my website. I am using about 6 images in the slideshow for a header. Because of the size of the images, the first image is slow in loading. However, the last image I am using in the list is a much smaller image.

    So I wonder if it possible is to use the smaller image as the first image to load, rotate the images twice, then stop the rotation at the second image in the list (the original first image which is the main image of the header)?

    If this possible, I would very much appreciate instructions for a newbie to change the coding. Thank you in advance.

  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

    Easy, here's a demo of the kind of on page init that will do that (important parts highlighted):

    Code:
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [468, 500], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["http://i26.tinypic.com/11l7ls0.jpg", "", "", "Nothing beats relaxing next to the pool when the weather is hot."],
    		["http://i29.tinypic.com/xp3hns.jpg", "http://en.wikipedia.org/wiki/Cave", "_new", "Some day I'd like to explore these caves!"],
    		["http://stickmanlabs.com/images/kevin_vegas.jpg"],
    		["http://i30.tinypic.com/531q3n.jpg"],
    		["http://i31.tinypic.com/119w28m.jpg", "", "", "What a beautiful scene with everything changing colors."] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:2500, cycles:2, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: "",
    	oninit: function(){
    			++this.setting.totalsteps
    
    		}
    })
    Be sure not to miss the added comma (red) after the togglerid entry.

    Just make your smaller image the first image, and your larger one the second. The show will cycle through twice, then advance to the second image and stop.
    - John
    ________________________

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

  3. #3
    Join Date
    Jan 2010
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you very much John

    Very much appreciated by me in sunny NZ

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
  •