Results 1 to 3 of 3

Thread: Ultimate Fade-in slideshow - STOP FADE IN ON FIRST IMAGE

  1. #1
    Join Date
    Jan 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade-in slideshow - STOP FADE IN ON FIRST IMAGE

    1) Script Title: Ultimate Fade-in slideshow

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

    3) Describe problem:

    Hi there. Please could you help. I'd like to remove the fade in effect on the first image in my slide show (so it displays straight away without a fade effect). The rest of the slide show can fade in and out as normal.

    Can anybody help me solve this problem - thank you!

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,134
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    Put this (highlighted) after your gallery call as shown:

    Code:
    var mygallery=new fadeSlideShow({
    	wrapperid: "fadeshow1", //ID of blank DIV on page to house Slideshow
    	dimensions: [250, 180], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["http://i26.tinypic.com/11l7ls0.jpg", "#what", "", "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://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:4000, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: ""
    })
    ;(function($, gal){
    	gal = gal.setting;
    	var sel = '#' + gal.wrapperid;
    	$('head').append('\n<style type="text/css">\n' +
    	sel + ', ' + sel + ' .gallerylayer {\n' +
    	'background-image: url(' + gal.imagearray[0][0] + ')!important;\n'+
    	'background-repeat: no-repeat!important;\n' +
    	'background-position: center!important;\n' +
    	'width: ' + gal.dimensions[0] + 'px;\n' +
    	'height: ' + gal.dimensions[1] + 'px;\n' +
    	'}\n');
    })(jQuery, mygallery);
    Make sure the two red names are the same.

    Note: This will make a style section setting the first image as the background image. It will still take as long as it takes to load that image before it shows up. For first time visitors, or anyone without that image in cache, that could be a few moments. But there will be no fade-in action for it.
    - John
    ________________________

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

  3. #3
    Join Date
    Jan 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile

    John, that works like a dream - thanks so much for your help!

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
  •