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.
Results 1 to 10 of 10
  1. #1
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Lightbulb Auto playing Java Image slider

    Hello Community of CodingForums.com,

    I have recently been studying into Javascript and trying my best to wrap my head around it and learning everything I can. I found this javascript made by Aaron Tennyson. He did a great job coding this all out and I have been able to customize the code and adjust it to my needs.

    However, after numerous amounts of efforts, I was not able to successful create a auto playing slider. If anyone can help me that would be absolutely amazing!

    Here is the html
    Code:
                <div id="photo-wrapper">
                    <img class="image" id="image1" src="images/featured2.png" alt="Image 1" />
                    <img class="image" id="image2" src="images/featured.png" alt="Image 2" />
                    <img class="image" id="image3" src="images/image3.jpg" alt="Image 3" />
                    <img class="image" id="image4" src="images/image4.jpg" alt="Image 4" />
                    <img class="image" id="image5" src="images/image5.jpg" alt="Image 5" />
                    
    
    
                    <img id="previous-btn" src="images/left.png" height="115" width="40" alt="Previous Button" />
                    <img id="next-btn" src="images/right.png" height="115" width="40" alt="Next Button" />
                </div> <!-- end #photo-wrapper -->

    Here is the Java:

    Code:
    /*
    	Created By: Aaron Tennyson 
    	Date: 		June 14, 2010
    	Copyright:  2010 All Rights Reserved 
    */
    
    //global variables
    var photoArray = new Array('#image1', '#image2', '#image3', '#image4', '#image5');
    var photoIndex = 0;
    var btnLock = false;
    
    $(document).ready(function(){
    	
    	// get client and container element height and width
    	var browserWidth = document.documentElement.clientWidth;
    	var browserHeight = document.documentElement.clientHeight;
    	var containerHeight = $('#container').height();
    	var containerWidth = $('#container').width();
    	
    	// center the container element in the browser window
    	$('#container').css({'position': 'absolute', 'top': (browserHeight / 2) - (containerHeight / 2),
    	                     'left': (browserWidth / 2) - (containerWidth / 2 )});		
     
    	// attach click handler to previous button and perform some action
    	$('#previous-btn').click(function() {
    		if(btnLock) return; // ignore click request if a transition is in progress
    		else btnLock = true; // remove click handler until transition is complete
     
    		// fade photo out
    		$(photoArray[photoIndex]).fadeOut('slow', function() {
    			photoIndex--;
    			if(photoIndex < 0) photoIndex = photoArray.length - 1;
    		
    			moveToImg(photoIndex);
    		});	
    	});
    	
    	// attach click handler to next button and perform some action
    	$('#next-btn').click(function() {
    		if(btnLock) return; // ignore click request if a transition is in progress
    		else btnLock = true; // remove click handler until transition is complete
    		
    		// fade photo out
    		$(photoArray[photoIndex]).fadeOut('slow', function() {
    			photoIndex++;
    			if(photoIndex > photoArray.length - 1) photoIndex = 0;
    			
    			moveToImg(photoIndex);
    		});	
    	});
    	
    	// transition in first image
    	moveToImg(photoIndex);
    });
     
    function moveToImg(id)
    {	
    	$(photoArray[id]).fadeIn('slow', function() {
    		btnLock = false;
    	}); 
    }

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,021
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    No Java in there. That's all JavaSCRIPT. Java and JavaScript are about as similar as Austrian and Australian: Their names start with the same letters.

    Anyway, that's also not vanilla JavaScript. It's coded us the jQuery framework/library.

    And you don't show in your code where your are including the jQuery library. Are you?

    And the only code I see there that will move to the next image is based on a button click. So, no, it's not going to autoplay.

    Do you want to retain the button click stuff? Or just toss it?
    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.

  • Users who have thanked Old Pedant for this post:

    Saves (08-05-2013)

  • #3
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    No Java in there. That's all JavaSCRIPT. Java and JavaScript are about as similar as Austrian and Australian: Their names start with the same letters.

    Anyway, that's also not vanilla JavaScript. It's coded us the jQuery framework/library.

    And you don't show in your code where your are including the jQuery library. Are you?

    And the only code I see there that will move to the next image is based on a button click. So, no, it's not going to autoplay.

    Do you want to retain the button click stuff? Or just toss it?
    Oh my, I had no idea that JavaScript and Java were different
    Yes I do have a jQuery library. Also, I do want to retain the button clicks for previous and next. But I also want the slideshow to fade in and out on it's own if no button has been clicked within 3 seconds.

  • #4
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Anyone?

  • #5
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Bump. Any help would greatly be appreciated!

  • #6
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Can someone please help me?

  • #7
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    No one knows?

  • #8
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,535
    Thanks
    45
    Thanked 259 Times in 256 Posts
    What you want to do is create two functions: nextImg and prevImg (names don't matter). When you auto play, you're doing the same thing as clicking the next button, so no need to repeat code.

    At the most basic level, what you want to do is use setInterval to trigger the nextImg function after however long you want. When someone clicks a button, unset the interval, and then reset it.

    Code:
    var autoCycle = setInterval(nextImg, 5000);
    
    $('.next, .last').click(function (e) {
    clearInterval(autoCycle);
    if ($(this).hasClass('next')) nextImg();
    else prevImg();
    autoCycle = setInterval(nextImg);
    }

  • #9
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Keleth View Post
    What you want to do is create two functions: nextImg and prevImg (names don't matter). When you auto play, you're doing the same thing as clicking the next button, so no need to repeat code.

    At the most basic level, what you want to do is use setInterval to trigger the nextImg function after however long you want. When someone clicks a button, unset the interval, and then reset it.

    Code:
    var autoCycle = setInterval(nextImg, 5000);
    
    $('.next, .last').click(function (e) {
    clearInterval(autoCycle);
    if ($(this).hasClass('next')) nextImg();
    else prevImg();
    autoCycle = setInterval(nextImg);
    }
    Thank you so much. I figured it out with your help Here is the code I am using that works:

    Code:
    $(function(){
        $('#container img:gt(0)').hide();
        setInterval(function(){
    			$(photoArray[photoIndex]).fadeOut('slow', function() {
    			photoIndex++;
    			if(photoIndex > photoArray.length - 1) photoIndex = 0;
    			
    			moveToImg(photoIndex);
    	});	
    }, 1000);
    });
    I have another request. I want to make it so that when you hover over the slider it pauses the autoplayer and resets the interval. I've literally been trying to accomplish this on my own with countless amounts of google research and tutorials for 2 hours now and I cannot figure it out for the life of me.

    If I could get the proper syntax using the code provided I would soo greatly appreciate it!!!

  • #10
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts
    This isn't a very active forum is it?


  •  

    Posting Permissions

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