Results 1 to 10 of 10

Thread: jQuery cycle plugin - click stop auto slide show

  1. #1
    Join Date
    Jan 2008
    Posts
    441
    Thanks
    67
    Thanked 4 Times in 4 Posts

    Default jQuery cycle plugin - click stop auto slide show

    i have this code that plays a great slide show with thumbnails, but i would like the thumbnails to stop the auto slide show
    or
    a navigation that can control the auto play

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>JQuery Cycle Plugin - Advanced Pager Demo</title>
    
    <style type="text/css">
    #slideshow { left: 20px }
    #nav { width: 100%; height: 80px; margin: 15px;  }
    #nav li { width: 25px; float: left; margin: 8px; list-style: none }
    #nav a { width: 25px; padding: 3px; display: block; border: 1px solid #ccc; }
    #nav a.activeSlide { background: #88f }
    #nav a:focus { outline: none; }
    #nav img { border: none; display: block }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">></script>
    <script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
    <script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.1.1.js"></script>
    
    <script type="text/javascript">
    $(function() {
        $('#slideshow').before('<ul id="nav">').cycle({
            fx:     'fade',
            speed:  'fast',
            timeout: 1000,
            pager:  '#nav',
            pagerAnchorBuilder: function(idx, slide) {
                return '<li><a href="#"><img src="' + slide.src + '" width="25" height="25" /></a></li>';
            }
    		//this breaks it
    		$('li').find('a').click(function(){ 
    				$('#slideshow').cycle('pause'); 
    				return false; 
    		}); 
    		
        });
    });
    </script>
    </head>
    <body>
    
    <div id="main">
    
    
    <div id="slideshow" class="pics">
    	<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
    	<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
    	<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
    	<img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
    	<img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
    	<img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" width="200" height="200" />
    	<img src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" width="200" height="200" />
    	<img src="http://cloud.github.com/downloads/malsup/cycle/beach8.jpg" width="200" height="200" />
    </div>
    
    
    </div>
    
    </body>
    </html>
    some reference ive used
    http://jquery.malsup.com/cycle/pager2.html
    http://old.nabble.com/jQuery-Cycle-P...029s27240.html
    http://jquery.malsup.com/cycle/

    if anyone can lend a hand, we can all share a great slide show
    thanks
    Last edited by ggalan; 01-18-2011 at 02:57 PM.

  2. The Following User Says Thank You to ggalan For This Useful Post:

    rexi (04-13-2011)

  3. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,994
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>JQuery Cycle Plugin - Advanced Pager Demo</title>
    
    <style type="text/css">
    #slideshow { left: 20px }
    #nav { width: 100%; height: 80px; margin: 15px;  }
    #nav li { width: 25px; float: left; margin: 8px; list-style: none }
    #nav a { width: 25px; padding: 3px; display: block; border: 1px solid #ccc; }
    #nav a.activeSlide { background: #88f }
    #nav a:focus { outline: none; }
    #nav img { border: none; display: block }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">></script>
    <script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
    <script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.1.1.js"></script>
    
    <script type="text/javascript">
    jQuery(function($){
    	$('#slideshow').before('<ul id="nav">').cycle({
    		fx:     'fade',
    		speed:  'fast',
    		timeout: 1000,
    		pager:  '#nav',
    		pagerAnchorBuilder: function(idx, slide){
    			return '<li><a href="#"><img src="' + slide.src + '" width="25" height="25" /></a></li>';
    		}
    	});
    
    	$('#nav a').click(function(){ 
    		$('#slideshow').cycle('pause');
    	});
    });
    </script>
    </head>
    <body>
    
    <div id="main">
    
    
    <div id="slideshow" class="pics">
    	<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
    	<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
    	<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
    	<img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
    	<img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
    	<img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" width="200" height="200" />
    	<img src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" width="200" height="200" />
    	<img src="http://cloud.github.com/downloads/malsup/cycle/beach8.jpg" width="200" height="200" />
    </div>
    
    
    </div>
    
    </body>
    </html>
    - John
    ________________________

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

  4. The Following User Says Thank You to jscheuer1 For This Useful Post:

    ggalan (01-18-2011)

  5. #3
    Join Date
    Jan 2008
    Posts
    441
    Thanks
    67
    Thanked 4 Times in 4 Posts

    Default

    jscheuer1, you rock!!

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

    Default

    Quote Originally Posted by jscheuer1 View Post
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>JQuery Cycle Plugin - Advanced Pager Demo</title>
    
    <style type="text/css">
    #slideshow { left: 20px }
    #nav { width: 100%; height: 80px; margin: 15px;  }
    #nav li { width: 25px; float: left; margin: 8px; list-style: none }
    #nav a { width: 25px; padding: 3px; display: block; border: 1px solid #ccc; }
    #nav a.activeSlide { background: #88f }
    #nav a:focus { outline: none; }
    #nav img { border: none; display: block }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">></script>
    <script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
    <script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.1.1.js"></script>
    
    <script type="text/javascript">
    jQuery(function($){
    	$('#slideshow').before('<ul id="nav">').cycle({
    		fx:     'fade',
    		speed:  'fast',
    		timeout: 1000,
    		pager:  '#nav',
    		pagerAnchorBuilder: function(idx, slide){
    			return '<li><a href="#"><img src="' + slide.src + '" width="25" height="25" /></a></li>';
    		}
    	});
    
    	$('#nav a').click(function(){ 
    		$('#slideshow').cycle('pause');
    	});
    });
    </script>
    </head>
    <body>
    
    <div id="main">
    
    
    <div id="slideshow" class="pics">
    	<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
    	<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
    	<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
    	<img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
    	<img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
    	<img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" width="200" height="200" />
    	<img src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" width="200" height="200" />
    	<img src="http://cloud.github.com/downloads/malsup/cycle/beach8.jpg" width="200" height="200" />
    </div>
    
    
    </div>
    
    </body>
    </html>
    Hi Moderator,

    I am a brand new member of your site. Also, I am pretty new to jQuery and BRAND NEW to the cycle plugin. I racked my brains on this very same issue for several days. Your solution helped me to solve my problem.

    The ultimate cause of my problem was that one of my cycle plugin settings was "conflicting" with my jQuery click event. I had the pauseOnPageHover option set to "1". So, when I clicked on a pager link, it had no effect because when I removed the hover the slideshow resumed.

    In my google searches I have noticed that many people are having this same problem. I wonder if this pauseOnPageHover setting is the cause.

    In my slideshow I want to be able to have the slide change on mouseover and pause on hover. It would also be nice if I could CLICK on a particular pager link to have the slideshow pause and then move the mouse off of the link. Do you know if there is a way to do this??

    I am also wondering if there is a way to DYNAMICALLY CHANGE a cycle option using jQuery (or if there is a way to do this using the cycle plugin).

    For example, let's say that I have the "pause" option set to "1" to pause the slideshow when I hover over a slide. What if I want to CLICK on the slide to have it pause the slideshow?? Can I reset "pause" to "0" using jQuery?

    Thanks so much for your help.

    Jim

  7. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,994
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    I think I may have heard about this issue or seen some evidence of it once. However, it would be much easier for me to help you if you could put up a demo of the problem. That way I don't have to guess at all of your settings and set up a slideshow complete with images, not to mention what your click function is.

    Set something like that up and provide a link to it and I'll see what I can do.
    - John
    ________________________

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

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

    Default

    Quote Originally Posted by jscheuer1 View Post
    I think I may have heard about this issue or seen some evidence of it once. However, it would be much easier for me to help you if you could put up a demo of the problem. That way I don't have to guess at all of your settings and set up a slideshow complete with images, not to mention what your click function is.

    Set something like that up and provide a link to it and I'll see what I can do.
    Hi there I just found this page from a search engine and I'm having the same issue. I can get the click to pause to work or the mouse over to pause to work... but not both together.

    http://artsonline.arts.monash.edu.au...e-problem.html

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>JQuery Cycle Plugin - Pause Vs Pause Problem</title>
    
    <style type="text/css">
    #slideshow { left: 20px }
    #slideshow .pane { margin: 10px; padding: 10px; border: 1px solid #666; }
    #slideshow .pane .pauseButton, #slideshow .pane .resumeButton, #slideshow .pane .pauseButton:link, #slideshow .pane .resumeButton:link { display:block; padding: 5px; color: #fff; background-color: #666; margin: 2px 0px; border: 1px solid #000;}
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">></script>
    <script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>
    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>
    <script type="text/javascript" src="http://malsup.github.com/jquery.easing.1.1.1.js"></script>
    
    <script type="text/javascript">
    jQuery(function($){
            $('#slideshow').cycle({
                    fx:     'fade',
                    speed:  'fast',
                    timeout: 1000,
                    pause: 1
            });
    
            $('.pauseButton').click(function(){
                    $('#slideshow').cycle('pause');
            });
    
            $('.resumeButton').click(function(){
                    $('#slideshow').cycle('resume');
            });
    });
    </script>
    </head>
    <body>
    
    <div id="main">
    
    
    <div id="slideshow" class="pics">
            <div class="pane"><a class="pauseButton" href="#">Pause</a><a class="resumeButton" href="#">Resume</a><img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" /></div>
            <div class="pane"><a class="pauseButton" href="#">Pause</a><a class="resumeButton" href="#">Resume</a><img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" /></div>
            <div class="pane"><a class="pauseButton" href="#">Pause</a><a class="resumeButton" href="#">Resume</a><img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" /></div>
            <div class="pane"><a class="pauseButton" href="#">Pause</a><a class="resumeButton" href="#">Resume</a><img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" /></div>
            <div class="pane"><a class="pauseButton" href="#">Pause</a><a class="resumeButton" href="#">Resume</a><img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" /></div>
            <div class="pane"><a class="pauseButton" href="#">Pause</a><a class="resumeButton" href="#">Resume</a><img src="http://cloud.github.com/downloads/malsup/cycle/beach6.jpg" width="200" height="200" /></div>
            <div class="pane"><a class="pauseButton" href="#">Pause</a><a class="resumeButton" href="#">Resume</a><img src="http://cloud.github.com/downloads/malsup/cycle/beach7.jpg" width="200" height="200" /></div>
            <div class="pane"><a class="pauseButton" href="#">Pause</a><a class="resumeButton" href="#">Resume</a><img src="http://cloud.github.com/downloads/malsup/cycle/beach8.jpg" width="200" height="200" /></div>
    </div>
    
    
    </div>
    
    </body>
    </html>

  9. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,994
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    Sorry for taking so long getting back to you.

    The problem probably is the pause: 1 property sets up a toggle. I didn't trace the code. And/or there's no keeping track of the pause state. Cycle may or may not provide this, but it's easy enough to make our own.

    There are at least two ways of looking at this depending upon exactly what behavior we're after, here's one:

    Code:
    <script type="text/javascript">
    jQuery(function($){
    	$('#slideshow').cycle({
    		fx:     'fade',
    		speed:  'fast',
    		timeout: 1000,
    		pause: 0
    	});
    
    	var pausestate;
    	function pauseit(e){
    		e.preventDefault();
    		if(!pausestate){
    			$('#slideshow').cycle('pause');
    			pausestate = true;
    		}
    	}
    
    	function resumeit(e){
    		e.preventDefault();
    		if(pausestate){
    			$('#slideshow').cycle('resume');
    			pausestate = false;
    		}
    	}
    
    	$('.pauseButton').click(pauseit);
    
    	$('.resumeButton').click(resumeit);
    	
    	$('#slideshow').bind('mouseenter mouseleave', function(e){
    		if (e.type === 'mouseenter'){
    			pauseit(e);
    		} else {
    			resumeit(e);
    		}
    	});
    });
    </script>
    It allows pause and resume to work as expected within the #slideshow div. Once the mouse moves out of #slideshow, it resumes if paused. It always pauses, if not already paused when the mouse moves over #slideshow.

    The other way of looking at it that I can think of, and I'm not sure if this would pass the logic test yet, would be that if paused by the pause button, it stays paused until the resume button is clicked, but otherwise pauses/resumes as expected when the mouse moves over/out of #slideshow.

    Just tried it, doesn't really seem to make sense, but I'll give it more thought. Any other arrangement, like it stays resumed if resumed by the resume button until the pause button is clicked, though probably doable, seems counterintuitive from the visitor's point of view.

    There could be other ways of looking at it, did you have something else in mind?
    Last edited by jscheuer1; 04-22-2011 at 03:25 AM. Reason: English Usage, minor code improvements
    - John
    ________________________

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

  10. #8
    Join Date
    Apr 2012
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    if i want to move the thumbnail position in the lower left of the slideshow (inside the slide show, not outside),and use the left and right button to go next or backward in the left and right of the slide show. How should i change the program?

  11. #9
    Join Date
    Jul 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"></script>

    I can't able to access this file. Kindly provide me solution to access thi sfile

  12. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,994
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    I can't either. There's either a problem with the server, or it's not public. You should be able to find everything you need for the cycle plugin here though:

    http://jquery.malsup.com/cycle/
    - 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
  •