Results 1 to 10 of 10

Thread: is there a way to get this script to fade between images?

  1. #1
    Join Date
    Jan 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default is there a way to get this script to fade between images?

    Code:
    <script language="JavaScript">
    <!-- hide from other browsers    
    
    //Pictures to switch inbetween
    
    var Rollpic1 = "imge1";
    var Rollpic2 = "image2";
    var Rollpic3 = "image3";
    //Start at the what pic:
    var PicNumber=1;
    //Number of pics:
    var NumberOfPictures=3;
    //Time between pics switching in secs
    var HowLongBetweenPic=1;
    
    //SwitchPic Function
    function SwitchPic(counter){
    
    	if(counter < HowLongBetweenPic){
    	
    		counter++;
    		
    		//DEBUG in the status bar at the bottom of the screen
    		window.status="Switch picture at 5 : "+counter+" PicNumber: "+PicNumber+" ";
    		
    		//Display pic in what <IMG> tag roll is what I called the image
    		document.roll.src = eval("Rollpic" + PicNumber);
    		
    		//function calls itself
    		CallSwitchPic=window.setTimeout("SwitchPic("+counter+")",1500); 
    		
    		}
    		
    		else{
    			//if its not the last picture goto the next picture
    			if(PicNumber < NumberOfPictures){
    				PicNumber++;
    				SwitchPic(0);
    			}
    			//its the last picture go to the first one
    			else{
    				PicNumber=1;
    				SwitchPic(0);
    				}
    	
    		}
    
    }
    // Stop hiding from old browsers -->
    </script>

    i have this script and its working perfectly, i just want to know its there anyway i could get it to fade in and out between images instead of it suddenly changing?
    Last edited by jscheuer1; 01-11-2012 at 03:42 PM. Reason: Format

  2. #2
    Join Date
    Jun 2011
    Location
    Pearl of the East
    Posts
    54
    Thanks
    1
    Thanked 2 Times in 2 Posts

    Default

    use jquery fadein and fadeout,.

  3. #3
    Join Date
    Jan 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    is there a code for this?

  4. #4
    Join Date
    Jun 2011
    Location
    Pearl of the East
    Posts
    54
    Thanks
    1
    Thanked 2 Times in 2 Posts

    Default

    google it

  5. #5
    Join Date
    Jan 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    i've tried google and nothing worked, can you please be specific or refer me to a code for this. i need to get this done..

  6. #6
    Join Date
    Jan 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    anyone?

  7. #7
    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

    That's an old and limited script. It would be pointless to try to inject an advanced technique like fading into it. I know it's tempting because the code seems so lightweight and simple, but trust me, you're better off using a script that perhaps involves much more code, but that has the business of cross browser fading worked out.

    See:

    http://www.dynamicdrive.com/dynamici...nslideshow.htm

    and/or:

    http://www.dynamicdrive.com/dynamici...army/index.htm

    There are also many other fading slideshow scripts around the web, which you probably can find using Google. Search on:

    fading slideshow javascript

    Some may be as good as or better than the two I linked to above, others may not be.

    If you want a real bare bones fading slideshow to play around with, here's one but I'm not recommending it, it does require that all the images are the same size:

    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.7/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery(function($){
    	var transitionspeed = 2000; // Set speed for fade in effect
    	var displaytime = 3000; // Set duration of image once faded in
    /// No need to Edit Script below here ///
    	function fadeThem(){$('#images img').eq(0).hide().appendTo('#images').fadeIn(transitionspeed, function(){setTimeout(fadeThem, displaytime);});}
    	var count = $('#images img').hide().each(function(){
    		$(new Image()).bind('load error', function(){
    			if(!--count){fadeThem();}
    		}).attr('src', this.src);
    	}).size();
    });
    </script>
    <style type="text/css">
    #images {
    	width: 140px; /* Set to Image Width */
    	height: 225px; /* Set to Image Height */
    	position: relative; /* Required */
    }
    /* Below all Required */
    #images img {
    	position: absolute;
    	top: 0;
    	left: 0;
    }
    #loading, #loading td {
    	width: 100%;
    	height: 100%;
    	vertical-align: middle;
    	text-align: center;
    }
    /* End all Required */
    </style>
    </head>
    <body>
    <div id="images">
    <table id="loading">
    <tr>
    <td>Loading . . .</td>
    </tr>
    </table>
    <img src="http://home.comcast.net/~jscheuer1/side/files/photo1.jpg" alt="original image" title="">
    <img src="http://home.comcast.net/~jscheuer1/side/files/photo2.jpg" alt="original image" title="">
    <img src="http://home.comcast.net/~jscheuer1/side/files/photo3.jpg" alt="original image" title="">
    </div>
    </body>
    </html>
    Last edited by jscheuer1; 01-11-2012 at 05:17 PM. Reason: add bare bones fading show
    - John
    ________________________

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

  8. #8
    Join Date
    Jan 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thank you so much! i have another question...heres what im working on (this is just the tester) http://janetglobaltester.tumblr.com/

    umm is there anyway i can get rid of the loading text that comes up before the slideshow plays? and also because am i editing this on a tumblr theme and i'm using this as the header, is there a way for me to center the slideshow and finally is there a way to fix the padding? as you can see there's a white gap on the header.
    Last edited by rosaxlouise; 01-12-2012 at 04:57 PM.

  9. #9
    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

    Sure. I also discovered some problems with the preloading, so I've changed things around to only preload the first image. Presumably the time it takes to display it, will be enough for the next image to load normally. Here it is with that modification, and without the loading message:

    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.7/jquery.min.js"></script>
    <script type="text/javascript">
    jQuery(function($){
    	var transitionspeed = 2000; // Set speed for fade in effect
    	var displaytime = 3000; // Set duration of image once faded in
    	var preload = true; // Should script load first image before starting? (recommended)
    /// No need to Edit Script below here ///
    	function callback(){
    		callback = function(){setTimeout(fadeThem, displaytime);};
    		$('#images img').css({visibility: 'visible'});
    		setTimeout(fadeThem, displaytime);
    	}
    	function fadeThem(){$('#images img').eq(0).hide().appendTo('#images').fadeIn(transitionspeed, callback);}
    	if(preload){
    		var pim = $('#images img').css({visibility: 'hidden'}).get(0);
    		$(new Image()).bind('load error', function(){
    			pim.style.visibility = 'visible';
    			fadeThem();
    		}).attr('src', pim.src);
    	} else {$('#images img:gt(0)').css({visibility: 'hidden'}); fadeThem();}
    });
    </script>
    <style type="text/css">
    #images {
    	width: 140px; /* Set to Image Width */
    	height: 225px; /* Set to Image Height */
    	position: relative; /* Required */
    }
    /* Below all Required */
    #images img {
    	position: absolute;
    	top: 0;
    	left: 0;
    }
    /* End all Required */
    </style>
    </head>
    <body>
    <div id="images">
    <img src="http://home.comcast.net/~jscheuer1/side/files/photo1.jpg" alt="original image" title="">
    <img src="http://home.comcast.net/~jscheuer1/side/files/photo2.jpg" alt="original image" title="">
    <img src="http://home.comcast.net/~jscheuer1/side/files/photo3.jpg" alt="original image" title="">
    </div>
    </body>
    </html>
    - John
    ________________________

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

  10. #10
    Join Date
    Jan 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    ahhhh! thank you sooo much! it works perfectly!

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
  •