ansaurus

Question

Answer 1

A:

Seems to work perfectly fine here, although I've had to amend your code to use .hasClass() because checking the 'class' attribute isn't reliable (jQuery leaves spaces in the class name).

Here's the code I tried using:

<!doctype html>
<html>
<head>
<title>JQuery Cycle Plugin - Example Slideshow</title>
<style type="text/css">
.slideshow { height: 232px; width: 232px; margin: auto }
.slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"&gt;&lt;/script&gt;

<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"&gt;&lt;/script&gt;

<!--  initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {

 $('.slideshow').cycle({
    fx: 'fade',
    speed: 'slow',
    timeout: 1000,
    pager: '.imagegallerypager.r2s1',
    pagerClick: function (zeroBasedSlideIndex, slideElement) {
        $('#txt').cycle({
            startingSlide: zeroBasedSlideIndex
        });
        $('#txt').cycle('pause');
        $('#img').cycle('pause');

    }
});

$('#txt').cycle({
    fx: 'none',
    speed: 'slow',
    timeout: 1000
});

$('#playpause').click(function () {
console.log('test');
    if ($('#playpause').hasClass('pause')) {
        $('#txt').cycle('pause');
        $('#img').cycle('pause');
        $('#playpause').html('play');
        $('#playpause').removeClass('pause');
        $('#playpause').addClass('play');
    }
    else if ($(this).hasClass('play')) {
        $('#txt').cycle('resume');
        $('#img').cycle('resume');
        $('#playpause').html('pause');
        $('#playpause').removeClass('play');
        $('#playpause').addClass('pause');
    }
});

});
</script>
</head>
<body>
  <div class="slideshow" id="img">
    <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" />
  </div>
  <div id="txt">
   <span>one</span>
   <span>two</span>
   <span>three</span>
   <span>four</span>
   <span>five</span>
  </div>
  <a href="#" id="playpause" class="pause">pause</a>
</body>
</html>

Mikee 2010-10-11 14:36:01

Yes, that works. But your example does not include a pager - it is this code that messes up my script;

kastru 2010-10-11 17:29:48

pagerClick: function (zeroBasedSlideIndex, slideElement) { $('#txt').cycle({ startingSlide: zeroBasedSlideIndex }); $('#txt').cycle('pause'); $('#img').cycle('pause'); }

kastru 2010-10-11 17:30:57

Try adding this div to the bottom of the html; <div class="imagegallerypager r2s1"></div>when you click a number in the pager, click the play/pause button (twice in this case), you will see that the image will resume normaly but the text will be set to default options?

kastru 2010-10-11 17:34:12

Answer 2

A:

Any ideas why this code fails;

<!doctype html>

JQuery Cycle Plugin - Example Slideshow .slideshow { height: 232px; width: 232px; margin: auto } .slideshow img { padding: 15px; border: 1px solid #ccc; background-color: #eee; } $(document).ready(function () {

        $('.slideshow').cycle({
            fx: 'fade',
            speed: 'slow',
            timeout: 1000,
            pager: '.imagegallerypager.r2s1',
            pagerClick: function (zeroBasedSlideIndex, slideElement) {
                $('#txt').cycle({
                    startingSlide: zeroBasedSlideIndex
                });
                $('#txt').cycle('pause');
                $('#img').cycle('pause');

            }
        });

        $('#txt').cycle({
            fx: 'none',
            speed: 'slow',
            timeout: 1000
        });

        $('#playpause').click(function () {

            if ($('#playpause').hasClass('pause')) {
                $('#txt').cycle('pause');
                $('#img').cycle('pause');
                $('#playpause').html('play');
                $('#playpause').removeClass('pause');
                $('#playpause').addClass('play');
            }
            else if ($(this).hasClass('play')) {
                $('#txt').cycle('resume');
                $('#img').cycle('resume');
                $('#playpause').html('pause');
                $('#playpause').removeClass('play');
                $('#playpause').addClass('pause');
            }
        });

    });
</script>

one two three four five pause

<div class="imagegallerypager r2s1"></div>

kastru 2010-10-11 20:34:20

ansaurus

tags:

views:

answers:

Problem with jQuery cycle plugin

related questions