Search code examples
javascriptjqueryslideshowcycle

Number behind in picture count (1/10) Jquery Cycle All Plugin

Bit of a newb but just having a small problem using jquery cycle all plugin. I am trying to create an image gallery, with two buttons next and previous which work fine, and with a counter like (1/10) etc. I've got it to work but for some reason the slideshow never counts the first image so therefore is always one image behind.

Somebody pointed out to me it is probably that the array starts at 0 and something else at 1, but I'm not sure where to find this really so just wondered if somebody could help me. Here is the code in the head of my document.

<script type="text/javascript">

$(document).ready(function(){ 
 $('#slideshow').cycle({
 fx:'none', 
 speed:'fast', 
 timeout: 0, 
 next:'#next',
 prev:'#prev',
 after: onAfter
 });
});

function onAfter(curr,next,opts) {
 var caption1 = (opts.currSlide +1) + '/' + opts.slideCount;
 $('#caption1').html(caption1);
}
    </script>

in use with cycle all plugin.

thanks for any help!

so I've changed to this as instructed.

<script type="text/javascript">

$(document).ready(function(){ 
    $('#slideshow').cycle({
    fx:'none', 
    speed:'fast', 
    timeout: 0, 
    next:'#next',
    pager: '#caption1',
    prev:'#prev',
    after: onAfter1
    });
});

currentSlide = $("#caption1 a.activeSlide").html()

function onAfter1(curr,next,opts) {
    var caption1 = (opts.currSlide +1) + '/' + opts.slideCount;
    $('#caption1').html(caption1);

}
</script>

which works fine after the first slide but the first slide randomly says this:

Prev Next (1/111234567891011)

Then when I press next it dissapears, probably my fault but is it something to do with the pre-existing function I have?

if I change to this:

<script type="text/javascript">

$(document).ready(function(){ 
    $('#slideshow').cycle({
    fx:'none', 
    speed:'fast', 
    timeout: 0, 
    next:'#next',
    pager: '#caption1',
    prev:'#prev',
    });
currentSlide = $("#caption1 a.activeSlide").html()

});
</script>

It just says 12345678910 instead of 1 of etc.

Edit:

I have changed code as instructed, see here, http://www.amythornley.co.uk/tests/codeplay.html and:

<script type="text/javascript">

$(document).ready(function(){ 
    $('#slideshow').cycle({
    fx:'fade', 
    speed:1, 
    timeout: 0, 
    pager: '.thepager',
    next:'#next',
    prev:'#prev',
    after: onAfter1
    });
   });

function onAfter1(curr, next, opts) {
    currentSlide = $(".thePager a.activeSlide").html();
    if (!currentSlide) currentSlide = "1";
    $('.slideCaption').html(currentSlide + '/' + opts.slideCount);
}

</script>

but it still doesn't work even though it works perfectly in your example, getting so annoyed at it! grrr. stupid thing :( and i know about broken images i havnt uploaded them yet, just a test to see the next/prev problem.

EDIT!

I used my original code simply changing the problem with the 'none' and speed and it appeaars to work fine, maybe this was the problem all along, thanks so much for pointing it out and for all your help even if some of it turned out to be pointless haha

<script type="text/javascript">

$(document).ready(function(){ 
    $('#slideshow').cycle({
    fx:'fade', 
    speed:1, 
    timeout: 0, 
    next:'#next',
    prev:'#prev',
    after: onAfter1
    });
});

function onAfter1(curr,next,opts) {
    var caption1 = (opts.currSlide +1) + '/' + opts.slideCount;
    $('#caption1').html(caption1);
}
    </script>
Solution

  • you could "fiddle" with its native navigation and get the current picture number, for example:

    $('.selector').cycle({ 
    fx:     'scrollLeft',
    pager:  '.selctorOfPagination',
    timeout:  15000,
    pause: 1,
    next:   '.selectorOfNext', 
    prev:   '. selectorOfPrevious'
});

    check the pager example here: http://jquery.malsup.com/cycle/int2.html

    EDIT: check my example here: http://jsfiddle.net/jackJoe/7DRSv/

    You can check which is the current image by obtaining the html of the pager:

    currentSlide = $(".thePager a.activeSlide").html()

    And then you can use that variable which is correct and you don't need to "guess" which image is current.

    EDIT 2: Check my new example: http://jsfiddle.net/jackJoe/7DRSv/2/

    P.S. the first time the slide animates, the caption doesn't get the active one, so we need to set that variable, check my example.

    EDIT 3: New example with a stopped animation, triggered by the next and previous buttons: http://jsfiddle.net/jackJoe/7DRSv/3/

    One thing I found out is that at your site (BTW the images are broken), when not using anykind of animation (fx: "none") the first active slide is one number behind! which takes us back to your original problem!

    You need to use somekind of animation (you can specify the speed in miliseconds); for an alternative to the "none", use the fx = 'fade' and speed: 1...