Results 1 to 3 of 3

Thread: Ultimate Fade-in Slideshow re-start

  1. #1
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Ultimate Fade-in Slideshow re-start

    1) Script Title: Ultimate fade-in Slideshow

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



    3) Describe problem:
    1. Is there any way to provide a re-start control to the script without having it repeat continuously? I am using cycles:1 in auto mode and would like to be able to re-start it on demand without reloading the page.
    2. Is there any way of transparentising the background so that different shaped images show the web page background instead of black stripes top and/or sides? (Transparentising part of the image doesn't seem to help).

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,030
    Thanks
    44
    Thanked 3,211 Times in 3,173 Posts
    Blog Entries
    12

    Default

    For #1 (this is a full working demo):

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <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 mygallery2=new fadeSlideShow({
    	wrapperid: "fadeshow2", //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", "", "", "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:2500, cycles:1, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: "fadeshow2toggler",
    	oninit: function(){
    		var s = this.setting, ss = this;
    		jQuery('#' + s.togglerid + ' .restart').click(function(e){
    			ss.navigate(0);
    			s.currentstep = -1;
    			s.displaymode.type = 'auto';
    			ss.showslide(0);
    			e.preventDefault();
    		});
    	}
    })
    
    </script>
    <style type="text/css">
    #fadeshow2toggler img {
    	border-width: 0;
    	vertical-align: top;
    }
    #fadeshow2toggler .status {
    	margin:0 50px;
    	font:bold 95% sans-serif;
    }
    #fadeshow2toggler .restart {
    	margin-top: 3px;
    }
    </style>
    </head>
    <body>
    
    <div id="fadeshow2"></div>
    
    <div id="fadeshow2toggler" style="width:250px; text-align:center; margin-top:10px">
    <a href="#" class="prev"><img src="http://i31.tinypic.com/302rn5v.png" /></a>  <span class="status"></span> <a href="#" class="next"><img src="http://i30.tinypic.com/lzkux.png" /></a>
    <br><input class="restart" type="button" value="Restart">
    </div>
    </body>
    </html>
    For #2, no you can't do that. You can (using overriding style - no script modification required) set the background of the slideshow to be the same image as the background-image of the page. It's tricky because the background-position of that image then needs to be tweaked to line up with the page's and this won't work for all layouts. The images in the show can then have transparent sections, through which the background image will show. Using partially transparent images for the images in the slideshow (alpha level .png) may (probably will) lead to unexpected results in IE though.

    To give you specifics I would need to see the live page, first to see if the layout even permits this, then if so to give you the styling required to do so.

    If you want more help on that one, please post a link to a page on your site that contains the sideshow and that has the background image for the page so I can check it out.
    - John
    ________________________

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

  3. #3
    Join Date
    Nov 2010
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thankyou very much John, will give it a go.

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
  •