Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 25
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts

    How Do I make it fade from one image to the next?

    I have this code...
    I want to be able to make each image fade from one to the other.
    Like this...
    http://www.dynamicdrive.com/dynamici...nslideshow.htm

    Is there a way to do that with this code?

    Code:
    <script type="text/javascript">
    // Simple Javascript Time based Image Swap
    
    var Pics = new Array();
    
    var counter = 0;
    
    
    // Use this section to change the image paths
    function LoadImages()
    {
     Pics[1] = new Image();
     Pics[1].src = "images/pic1.jpg";
     Pics[2] = new Image();
     Pics[2].src = "images/pic2.jpg";
     Pics[3] = new Image();
     Pics[3].src = "images/pic3.jpg";
     Pics[4] = new Image();
     Pics[4].src = "images/pic4.jpg";
     Pics[5] = new Image();
     Pics[5].src = "images/pic5.jpg";
     Pics[6] = new Image();
     Pics[6].src = "images/pic6.jpg";
     Pics[7] = new Image();
     Pics[7].src = "images/pic7.jpg";
     Pics[8] = new Image();
     Pics[8].src = "images/pic8.jpg";
     Pics[9] = new Image();
     Pics[9].src = "images/pic9.jpg";
     Pics[10] = new Image();
     Pics[10].src = "images/pic10.jpg";
     Pics[11] = new Image();
     Pics[11].src = "images/pic11.jpg";
     Pics[12] = new Image();
     Pics[12].src = "images/pic12.jpg";
     Pics[13] = new Image();
     Pics[13].src = "images/pic13.jpg";
     Pics[14] = new Image();
     Pics[14].src = "images/pic14.jpg";
     Pics[15] = new Image();
     Pics[15].src = "images/pic15.jpg";
     Pics[16] = new Image();
     Pics[16].src = "images/pic16.jpg";
     Pics[17] = new Image();
     Pics[17].src = "images/pic17.jpg";
    
     document.pic1.src = Pics[1].src;
    }
    //Time in miliseconds
    function timedImage()
    
    
    {
    counter ++
     if (counter > 17) {
       counter = 1;
     }
     document.pic1.src = Pics[counter].src;
    t=setTimeout("timedImage()",5000);
    }
    </script>
    Last edited by G2Smil; 08-31-2010 at 06:51 PM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,569
    Thanks
    80
    Thanked 4,496 Times in 4,460 Posts
    No. Or, rather, there is. But why would you want to?

    Use the code that they show in that link and forget your old code.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Aug 2010
    Location
    FL
    Posts
    35
    Thanks
    0
    Thanked 1 Time in 1 Post
    Please take a look at my code.

    http://codebyter.com/post.php?code&id=11

    Let me know if you have any questions. You can customize everything needed. Just read the post and how to configure.

    p.s. Leave me a comment if you like the script!

  • Users who have thanked codebyter for this post:

    G2Smil (09-01-2010)

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,569
    Thanks
    80
    Thanked 4,496 Times in 4,460 Posts
    Pretty nice. Only major thing missing, compared to the DynamicDrive script, are the text labels.

    I, personally, would rather you had coded:
    Code:
    function Picture( img, link, text )
    {
        this.image = img;
        this.url   = link;
        this.caption = text; 
    }
    
    var pix = [
        new Picture( "xyz.jpg", "zambonis.html", "Lovely ice scrapers" ), 
        ...
    Or similar. Rather than having parallel arrays. Has the major advantage that you can easily add more characteristics to each Picture by just changing what the constructor can handle and if some characteristics are missing for some pictures, you can supply defaults. The user doesn't have to create yet another parallel array to add another property (as for example captions, in your case).

    But that's me.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New Coder
    Join Date
    Aug 2010
    Location
    FL
    Posts
    35
    Thanks
    0
    Thanked 1 Time in 1 Post
    Quote Originally Posted by Old Pedant View Post
    Pretty nice. Only major thing missing, compared to the DynamicDrive script, are the text labels.

    I, personally, would rather you had coded:
    Code:
    function Picture( img, link, text )
    {
        this.image = img;
        this.url   = link;
        this.caption = text; 
    }
    
    var pix = [
        new Picture( "xyz.jpg", "zambonis.html", "Lovely ice scrapers" ), 
        ...
    Or similar. Rather than having parallel arrays. Has the major advantage that you can easily add more characteristics to each Picture by just changing what the constructor can handle and if some characteristics are missing for some pictures, you can supply defaults. The user doesn't have to create yet another parallel array to add another property (as for example captions, in your case).

    But that's me.
    Thats actually a great idea for version 2! Thanks

  • #6
    Regular Coder
    Join Date
    Jul 2010
    Location
    St George, UT
    Posts
    138
    Thanks
    6
    Thanked 17 Times in 17 Posts
    codebyter, I'm digging your site. I like the simplicity of it. Nice slideshow BTW.

  • #7
    New Coder
    Join Date
    Aug 2010
    Posts
    46
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Good article in first post. There is also another one, I like.

  • #8
    New Coder
    Join Date
    Aug 2010
    Location
    FL
    Posts
    35
    Thanks
    0
    Thanked 1 Time in 1 Post
    Quote Originally Posted by wildreason View Post
    codebyter, I'm digging your site. I like the simplicity of it. Nice slideshow BTW.
    Thanks much I really appreciate it

  • #9
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    codebyter,

    having a few problems putting your slideshow code on my website.
    As you can see it's working pretty well on my homepage
    http://www.morganwalp.com/
    except for the fact that the first image is a tiny square?
    Not sure how to get rid of that.

    Problem is on my portfolio page it isn't showing up at all?
    http://www.morganwalp.com/portfolio.html

    Help? Please?

    Also is there any way to make it to the images aren't links?
    I don't really want to have links on them.
    I tried deleting the links, but there is still a finger pointer when moving the mouse on top of them.
    And when you click on them you get a blank page?
    Last edited by G2Smil; 09-01-2010 at 05:28 PM.

  • #10
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    codebyter,

    ok fixed one problem....
    now confused on another...
    the code only works if i have it twice in my code....

    In my head I have this
    Code:
    <script type="text/javascript" src="http://www.codebyter.com/concepts/js/image_slideshow/functions.js"></script>
    
    <script type="text/javascript" id="kwm_img_script">
    	var images = [];
    	var urls = [];
    	images[0] = 'images/pic1';
    	urls[0] = '';
    	images[1] = 'images/pic2';
    	urls[1] = '';
    	images[2] = 'images/pic3';
    	urls[2] = '';
    
    	var settings = {'step' : 5, 'speed' : 20, 'time_btwn_images' : 3000};
    	kwm_image_rotator.add(
    		settings,
    		'images/pic1', 
    		'height: 300px; width: 500px; border: 1px solid black; background-color: white; z-index: 1;', 
    		images, urls);
    </script>
    then in my body i have this
    Code:
    <script type="text/javascript" src="http://www.codebyter.com/concepts/js/image_slideshow/functions.js"></script>
    
    <script type="text/javascript" id="kwm_img_script">
    	var images = [];
    	images[0] = 'http://morganwalp.com/images/pic1.jpg';
    	images[1] = 'http://morganwalp.com/images/pic2.jpg';
    	images[2] = 'http://morganwalp.com/images/pic3.jpg';
    	images[3] = 'http://morganwalp.com/images/pic4.jpg';
    	images[4] = 'http://morganwalp.com/images/pic5.jpg';
    	images[5] = 'http://morganwalp.com/images/pic6.jpg';
    	images[6] = 'http://morganwalp.com/images/pic7.jpg';
    	images[7] = 'http://morganwalp.com/images/pic8.jpg';
    	images[8] = 'http://morganwalp.com/images/pic9.jpg';
    	images[9] = 'http://morganwalp.com/images/pic10.jpg';
    	images[10] = 'http://morganwalp.com/images/pic11.jpg';
    	images[11] = 'http://morganwalp.com/images/pic12.jpg';
    	images[12] = 'http://morganwalp.com/images/pic13.jpg';
    	images[13] = 'http://morganwalp.com/images/pic14.jpg';
    	images[14] = 'http://morganwalp.com/images/pic15.jpg';
    	images[15] = 'http://morganwalp.com/images/pic16.jpg';
    	images[16] = 'http://morganwalp.com/images/pic17.jpg';
    
    	var settings = {'step' : 5, 'speed' : 20, 'time_btwn_images' : 4000};
    	kwm_image_rotator.add(
    		settings,
    		'http://morganwalp.com/images/pic1.jpg', 
    		'height: 469px; width: 870px; border: 1px solid black; background-color: white; z-index: 1;', 
    		images, urls);
    </script>
    And somehow that makes it work?
    If I try to delete the code in the header the whole thing dissappears?

  • #11
    New Coder
    Join Date
    Aug 2010
    Location
    FL
    Posts
    35
    Thanks
    0
    Thanked 1 Time in 1 Post
    you need to put the script on the page where you want the image rotator to be. it wont work in the head of the page, only in the body.

  • #12
    New Coder
    Join Date
    Aug 2010
    Location
    FL
    Posts
    35
    Thanks
    0
    Thanked 1 Time in 1 Post
    also, you have:

    Code:
    <script type="text/javascript" id="kwm_img_script">
    	var images = [];
    	var urls = [];
    	images[0] = 'images/pic1';
    	urls[0] = '';
    	images[1] = 'images/pic2';
    	urls[1] = '';
    	images[2] = 'images/pic3';
    	urls[2] = '';
    
    	var settings = {'step' : 5, 'speed' : 20, 'time_btwn_images' : 3000};
    	kwm_image_rotator.add(
    		settings,
    		'images/pic1', 
    		'height: 300px; width: 500px; border: 1px solid black; background-color: white; z-index: 1;', 
    		images, urls);
    </script>
    it needs to be:

    Code:
    <script type="text/javascript" id="kwm_img_script">
    	var images = [];
    	var urls = [];
    	images[0] = 'images/pic1';
    	urls[0] = '';
    	images[1] = 'images/pic2';
    	urls[1] = '';
    	images[2] = 'images/pic3';
    	urls[2] = '';
    
    	var settings = {'step' : 5, 'speed' : 20, 'time_btwn_images' : 3000};
    	kwm_image_rotator.add(
    		settings,
    		'URL OF SOME LOADING IMAGE GOES HERE', 
    		'height: 300px; width: 500px; border: 1px solid black; background-color: white; z-index: 1;', 
    		images, urls);
    </script>

  • #13
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    When I delete the code from the header the slideshow doesn't work at all?
    I don't understand it.
    But somehow keeping the code in the header makes it work?

    I'm not sure what you mean by this either?
    'URL OF SOME LOADING IMAGE GOES HERE'

    I'm pretty new to trying to mess with my code so...

  • #14
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    9
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I have this code in my body

    Code:
    <script type="text/javascript" src="http://www.codebyter.com/concepts/js/image_slideshow/functions.js"></script>
    
    <script type="text/javascript" id="kwm_img_script">
    	var images = [];
    	images[0] = 'http://morganwalp.com/images/pic1.jpg';
    	images[1] = 'http://morganwalp.com/images/pic2.jpg';
    	images[2] = 'http://morganwalp.com/images/pic3.jpg';
    	images[3] = 'http://morganwalp.com/images/pic4.jpg';
    	images[4] = 'http://morganwalp.com/images/pic5.jpg';
    	images[5] = 'http://morganwalp.com/images/pic6.jpg';
    	images[6] = 'http://morganwalp.com/images/pic7.jpg';
    	images[7] = 'http://morganwalp.com/images/pic8.jpg';
    	images[8] = 'http://morganwalp.com/images/pic9.jpg';
    	images[9] = 'http://morganwalp.com/images/pic10.jpg';
    	images[10] = 'http://morganwalp.com/images/pic11.jpg';
    	images[11] = 'http://morganwalp.com/images/pic12.jpg';
    	images[12] = 'http://morganwalp.com/images/pic13.jpg';
    	images[13] = 'http://morganwalp.com/images/pic14.jpg';
    	images[14] = 'http://morganwalp.com/images/pic15.jpg';
    	images[15] = 'http://morganwalp.com/images/pic16.jpg';
    	images[16] = 'http://morganwalp.com/images/pic17.jpg';
    
    	var settings = {'step' : 5, 'speed' : 20, 'time_btwn_images' : 4000};
    	kwm_image_rotator.add(
    		settings,
    		'http://morganwalp.com/images/pic1.jpg', 
    		'height: 469px; width: 870px; border: 1px solid black; background-color: white; z-index: 1;', 
    		images, urls);
    </script>

  • #15
    New Coder
    Join Date
    Aug 2010
    Location
    FL
    Posts
    35
    Thanks
    0
    Thanked 1 Time in 1 Post
    put this in the <head> tag:

    Code:
    <script type="text/javascript" src="http://www.codebyter.com/concepts/js/image_slideshow/functions.js"></script>
    put this in the <body> tag where you want the image rotator to show:

    Code:
    <script type="text/javascript" id="kwm_img_script">
    	var images = [];
    	var urls = [];
    	images[0] = 'images/pic1';
    	urls[0] = '';
    	images[1] = 'images/pic2';
    	urls[1] = '';
    	images[2] = 'images/pic3';
    	urls[2] = '';
    
    	var settings = {'step' : 5, 'speed' : 20, 'time_btwn_images' : 3000};
    	kwm_image_rotator.add(
    		settings,
    		'http://www.sony.co.uk/biz/wep/menuimages/loading.gif', 
    		'height: 300px; width: 500px; border: 1px solid black; background-color: white; z-index: 1;', 
    		images, urls);
    </script>


  •  
    Page 1 of 2 12 LastLast

    LinkBacks (?)


    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •