View Full Version : Ultimate Fade-in Slideshow re-start

11-27-2010, 08:44 AM
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).

11-27-2010, 03:57 PM
For #1 (this is a full working demo):

<!DOCTYPE html>
<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 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://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){
s.currentstep = -1;
s.displaymode.type = 'auto';

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

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

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.

11-30-2010, 01:18 PM
Thankyou very much John, will give it a go.