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 3 of 3
  1. #1
    Regular Coder
    Join Date
    Apr 2010
    Location
    Somerset,UK
    Posts
    138
    Thanks
    10
    Thanked 1 Time in 1 Post

    Unhappy Fading image slideshow repeat

    HI all

    I am just starting to look at jQuery to add some cool effects to my site.

    I found a tutorial for a fading slideshow which I have working fine. Only it didnt have instructions on how to get it to loop around (repeat)

    Code:
    $(document).ready(function() {
        $('#picOne').fadeIn(2000).delay(3000).fadeOut(2000);
    	$('#picTwo').delay(5000).fadeIn(2000).delay(3000).fadeOut(2000);
    	$('#picThree').delay(10000).fadeIn(2000).delay(3000).fadeOut(2000);
    	$('#picFour').delay(15000).fadeIn(2000).delay(3000).fadeOut(2000);
    
    });
    With some investigation I found a 'cycle' plugin which is supposed to work. I have the plugin installed and put in the code
    Code:
     $('#pics').cycle('fade')
    but it does not work properly.

    It shows the first image, then misses the second one, then shows the third and fourth image as it should. It then loops back to the second image and carries on with the slideshow.

    Obviously I want it to start at the first image and work though to the fourth and then back to the first.
    Can anyone help? Do I need to alter the code or is there a way of doing this without the plug in?

    Code:
    <script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="scripts/jquery.cycle.all.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    $(document).ready(function() {
        $('#picOne').fadeIn(2000).delay(3000).fadeOut(2000);
    	$('#picTwo').delay(5000).fadeIn(2000).delay(3000).fadeOut(2000);
    	$('#picThree').delay(10000).fadeIn(2000).delay(3000).fadeOut(2000);
    	$('#picFour').delay(15000).fadeIn(2000).delay(3000).fadeOut(2000);
    	$('#pics').cycle('fade');
    });
    
    
    </script>
    Again I am learning so be gentle with me! I really want to keep this as simple as possible to build up my understanding of jQuery.
    Thanks in advance

    C
    Hmmmm......scratchy head time......

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    If that's the malsup plugin it should work fine, but I think you probably need to remove your original code ($('#picOne').fadeIn(2000).delay(3000).fadeOut(2000);...etc).

    If that's still no good then a link to your page would help.

    The cycle plugin is fine, but if you want to understand how these sorts of transitions work have a look here for a much simplified, non-plugin version with an explanation.

  • Users who have thanked SB65 for this post:

    claire_t (03-01-2012)

  • #3
    Regular Coder
    Join Date
    Apr 2010
    Location
    Somerset,UK
    Posts
    138
    Thanks
    10
    Thanked 1 Time in 1 Post
    YAY

    That worked perfectly!!!

    I was getting confused and didnt realise the cycle plug in just made the slideshow work without all the other code!

    Thank you SB65! muchly appreciated!!


    C
    Hmmmm......scratchy head time......


  •  

    Posting Permissions

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