Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Ultimate - Fade-In Show

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

    Default Ultimate - Fade-In Show

    Is there a way within the current structure of this tool, to set it up, so that if I select a number on my page and have it to go to that slide. I am trying to do this with the minimum amount of chnage on the existing code, but not sure how to make it work. So any help would be appreciated. Thanks.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,677
    Thanks
    43
    Thanked 3,126 Times in 3,092 Posts
    Blog Entries
    12

    Default

    There are various ways. Here's one (no need to change the main script):

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Ultimate Fade In Slideshow w/numbered buttons, stop and go</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
    #controls {
    	width: 250px;
    	text-align: center;
    }
    .status {
    	margin: 0 10px;
    	font-weight: bold;
    }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/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: [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:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: "fadeshow1toggler",
    	oninit: function(){
    		var dm = this.setting.displaymode;
    		this.nav = function(num){
    			this.navigate(num);
    		};
    		this.stop = function(){
    			this.navigate(this.setting.imgindex);
    		};
    		this.resume = function(){
    			if(dm.type!=='auto'){
    				dm.type='auto';
    				this.showslide('next');
    			}
    		};
    	}
    });
    
    </script>
    </head>
    <body>
    <div id="fadeshow1"></div>
    <div id="controls">
    <input type="button" onclick="mygallery.stop();" value="Stop"><input type="button" onclick="mygallery.nav(0);" value="1"><input type="button" onclick="mygallery.nav(1);" value="2"><input type="button" onclick="mygallery.nav(2);" value="3"><input type="button" onclick="mygallery.nav(3);" value="4"><input type="button" onclick="mygallery.resume();" value="Go">
    <span id="fadeshow1toggler"><span class="status"></span>
    <input type="button" class="prev" value="&lt;">
    <input type="button" class="next" value="&gt;">
    </span>
    </div>
    </body>
    </html>
    I also have a version that automatically generates the stop, go, and number buttons. It would be good if you have tons of images, but a little harder to customize as to look and feel. Let me know if you're interested in it.

    Oh, and by the way:

    In the future, please post about Dynamic Drive Scripts in the Dynamic Drive Scripts Help section here where I've moved this thread, and:

    Please include a link to the DD script(s) in question in your post. See this post for more information.
    Last edited by jscheuer1; 03-25-2011 at 05:58 PM. Reason: add bit about other version
    - John
    ________________________

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

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

    Default

    I was just wondering if there were a way to change the color of the buttons based on the slide that was currently displayed?

    If tried an if statement but it always thinks the index is 1.

    Thanks!

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,677
    Thanks
    43
    Thanked 3,126 Times in 3,092 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Speed153 View Post
    I was just wondering if there were a way to change the color of the buttons based on the slide that was currently displayed?

    If tried an if statement but it always thinks the index is 1.

    Thanks!

    Please post a link to a page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

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

  5. #5
    Join Date
    Apr 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Post

    Here's the html for it:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <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: [700, 232], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["001.jpg", "", "", "Sample Description."],
    		["002.jpg", "http://www.google.ca", "_new", "Google it!"],
    		["003.jpg"],
    		["004.jpg"],
    		["005.jpg", "", "", "Blah, Blah, Blech."] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: "fadeshow1toggler",
    	oninit: function(){
    		var dm = this.setting.displaymode;
    		this.nav = function(num){
    			this.navigate(num);
    		};
    	},
    	onslide:function(curimage, index){
    		if (index = 0) {
    		document.getElementById("image0").innerHTML = "<img id='image0' src='restore.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(0)'/> <img id='image1' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(1)'/> <img id='image2' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(2)'/> <img id='image3' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(3)'/> <img id='image4' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(4)'/>"
    		}
    		else if (index = 1) {
    		document.getElementById("image0").innerHTML = "<img id='image0' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(0)'/> <img id='image1' src='restore.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(1)'/> <img id='image2' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(2)'/> <img id='image3' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(3)'/> <img id='image4' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(4)'/>"
    		}
    		 else if (index = 2) {
      document.getElementById("image0").innerHTML = "<img id='image0' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(0)'/> <img id='image1' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(1)'/> <img id='image2' src='restore.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(2)'/> <img id='image3' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(3)'/> <img id='image4' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(4)'/>"
    		  }
     else if (index = 3) {
      document.getElementById("image0").innerHTML = "<img id='image0' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(0)'/> <img id='image1' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(1)'/> <img id='image2' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(2)'/> <img id='image3' src='restore.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(3)'/> <img id='image4' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(4)'/>"
      }
      else if (index = 4) {
      document.getElementById("image0").innerHTML = "<img id='image0' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(0)'/> <img id='image1' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(1)'/> <img id='image2' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(2)'/> <img id='image3' src='imgSEL.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(3)'/> <img id='image4' src='restore.png' alt='' width='10' height='10' border='0' style='padding:4px;' onclick='mygallery.nav(4)'/>"
      }
      
    });
    
    </script>
    <link href="slideshow.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    
    <div id="fadeshow1toggler">
      <div id="previous"><a href="#" class="prev"><img src="prev.png" style="border-width:0" /></a></div>
        <div id="nextone" align="right"><a href="#" class="next"><img src="next.png" style="border-width:0" /></a></div>
    <div id="fadeshow1"></div>
    <div id="promonav" align="right">
        
    <div id="image0">
        </div
        </div>
    <div id="info2"></div>
    </div>
    </body>
    </html>

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,677
    Thanks
    43
    Thanked 3,126 Times in 3,092 Posts
    Blog Entries
    12

    Default

    That's not at all how I would go about it. But if you do, you need to test for the index (if (index == 0)), not set it (if (index = 0)). And you can't have the division with the images in it and the the first image in it both having the same id (image0).

    Anyways, this works (changes to the markup and the on page script code):

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <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: [700, 232], //width/height of gallery in pixels. Should reflect dimensions of largest image
    	imagearray: [
    		["001.jpg", "", "", "Sample Description."],
    		["002.jpg", "http://www.google.ca", "_new", "Google it!"],
    		["003.jpg"],
    		["004.jpg"],
    		["005.jpg", "", "", "Blah, Blah, Blech."] //<--no trailing comma after very last image element!
    	],
    	displaymode: {type:'auto', pause:2500, cycles:0, wraparound:false},
    	persist: false, //remember last viewed slide and recall within same session?
    	fadeduration: 500, //transition duration (milliseconds)
    	descreveal: "ondemand",
    	togglerid: "fadeshow1toggler",
    	oninit: function(){
    		var actbut = 'restore.png', normbut = 'imgSEL.png', $ = jQuery, $imDiv = $('#images'), $buts, ss = this, gs = ss.setting;
    		$.each(gs.imagearray, function(i){
    			$('<img id="image' + i + '" data-index="' + i + '" src="' + (i == gs.curimage? actbut : normbut) + '" alt="" />')
    			.appendTo($imDiv).click(function(){
    				clearTimeout(ss.buttimer);
    				this.src = actbut;
    				$buts.not(this).attr('src', normbut);
    				ss.navigate(this.getAttribute('data-index'))
    			});
    		});
    		$buts = $imDiv.find('img');
    		gs.$next.add(gs.$prev).click(function(){
    			clearTimeout(ss.buttimer);
    			var $but = $('#image' + gs.curimage);
    			$but.attr('src', actbut);
    			$buts.not($but).attr('src', normbut);
    		});
    		gs.$wrapperdiv.mouseenter(function(){
    			clearTimeout(ss.buttimer);
    			ss.waspaused = true;
    		});
    		gs.onslide = function(curimage, index){
    			if(gs.displaymode.type === 'auto'){
    				ss.buttimer = setTimeout(function(){
    					var next = '#image' + ((index + (ss.waspaused? 0 : 1)) % gs.imagearray.length);
    					if(ss.waspaused){
    						ss.waspaused = false;
    						gs.onslide(curimage, index);
    					}
    					$buts.not(next).attr('src', normbut).end().filter(next).attr('src', actbut);
    				}, ss.waspaused? 0 : gs.displaymode.pause);
    			}
    		};
    	}
    });
    
    </script>
    <link href="slideshow.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    #images img{
    	width: 10px;
    	height: 10px;
    	padding: 4px;
    	cursor: pointer;
    }
    #images {
    	background-color: black;
    }
    </style>
    </head>
    
    <body>
    
    <div id="fadeshow1toggler">
      <div id="previous"><a href="#" class="prev"><img src="prev.png" style="border-width:0" /></a></div>
        <div id="nextone" align="right"><a href="#" class="next"><img src="next.png" style="border-width:0" /></a></div>
    <div id="fadeshow1"></div>
    <div id="promonav" align="right">
        
    <div id="images"></div>
        </div>
    <div id="info2"></div>
    </div>
    </body>
    </html>
    Last edited by jscheuer1; 05-10-2011 at 04:34 PM. Reason: more robust method
    - John
    ________________________

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

  7. #7
    Join Date
    Feb 2011
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    I also trying to use this script since couple of weeks but I could not success.

    Here is the sample of my site where I pasted the above script

    http://************/test.php
    Last edited by newarnikanchhi; 05-17-2011 at 08:20 AM.

  8. #8
    Join Date
    Apr 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks so much jscheuer1 for the code! It works great!! Definitly a much better way to go about it that what I was trying.

  9. #9
    Join Date
    Jun 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    There are various ways (to select a number and have it to go to that slide). Here's one (no need to change the main script):
    Thank you for this jscheuer!! Using your code as a base, what add'l code would would be required to automatically resume the 'play' mode, after a few seconds following a click? ie. instead of it stopping.

    peace,
    Joshua

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,677
    Thanks
    43
    Thanked 3,126 Times in 3,092 Posts
    Blog Entries
    12

    Default

    If you mean this code:

    Code:
    	oninit: function(){
    		var dm = this.setting.displaymode;
    		this.nav = function(num){
    			this.navigate(num);
    		};
    		this.stop = function(){
    			this.navigate(this.setting.imgindex);
    		};
    		this.resume = function(){
    			if(dm.type!=='auto'){
    				dm.type='auto';
    				this.showslide('next');
    			}
    		};
    	}
    Then:

    Code:
    	oninit: function(){
    		var dm = this.setting.displaymode, tmpType;
    		this.nav = function(num){
    			tmpType = dm.type;
    			this.navigate(num);
    			dm.type = tmpType;
    		};
    		this.stop = function(){
    			this.navigate(this.setting.imgindex);
    		};
    		this.resume = function(){
    			if(dm.type!=='auto'){
    				dm.type='auto';
    				this.showslide('next');
    			}
    		};
    	}
    - 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
  •