malsup / cycle Goto Github PK

Just another idea I had lately: When dealing with more than one instance on the same page (maybe even all inside some ".slideshow" ;), it would be quite cool to chose the slideshow itself as trigger for the "next"/"prev" options instead of some element (because this is some kind of confusing when every .slideshow has a .next…).

Even more cool would be of course support for some syntax like "this ~ .next" (.next in the same div as the slideshow itself), this would make 1000 cycles on one page work like a charm. :)

Sorry didn't notice the existing report for this one. I swear I looked for it first.

Ran into an error with player controls that resume a slide show. In the function checkInstantResume, the following line:

go(options.elements, options, 1, (!opts.rev && !opts.backwards));

should be:

go(options.elements, options, 1, (!options.rev && !options.backwards));

When retrieving images dynamically the 2 images minimum is a significant limitation.

With 1 image, the slideshow should work too, that image being static (like a splash).
With 0 images, the slideshow should work too, waiting for images to be added.

Hello, how can I use prev/next controls and also allow the user to click the image to advance? I tried using two 'next:' selectors in the javascript but It did not work.

Thanks

Hi there,

We're currently experiencing difficulties when we're running jQuery in fx.off-mode. We're using this for some mobile devices and a few outdated (read IE6) browsers.

The following outputs are form one slideshow, where i printed the name of the handler, along with a timestamp, followed by opts.currSlide like this:

function onAfter(curr,next,opts) {
    console.log('onAfter',Date().toString(), opts.currSlide);
}

Basically what happens is the following: If we're in regular fx.off = false mode (which is the default) we can record the following succession of handlers. It seems, "onBefore4/onAfter5" are a pair for one change.

onBefore Wed Jul 27 2011 16:24:05 GMT+0200 (W. Europe Daylight Time) 4
onAfter  Wed Jul 27 2011 16:24:06 GMT+0200 (W. Europe Daylight Time) 5
onBefore Wed Jul 27 2011 16:24:10 GMT+0200 (W. Europe Daylight Time) 5
onAfter  Wed Jul 27 2011 16:24:11 GMT+0200 (W. Europe Daylight Time) 6
onBefore Wed Jul 27 2011 16:24:15 GMT+0200 (W. Europe Daylight Time) 6
onAfter  Wed Jul 27 2011 16:24:16 GMT+0200 (W. Europe Daylight Time) 7
onBefore Wed Jul 27 2011 16:24:20 GMT+0200 (W. Europe Daylight Time) 7
onAfter  Wed Jul 27 2011 16:24:21 GMT+0200 (W. Europe Daylight Time) 8
onBefore Wed Jul 27 2011 16:24:25 GMT+0200 (W. Europe Daylight Time) 8
onAfter  Wed Jul 27 2011 16:24:26 GMT+0200 (W. Europe Daylight Time) 0

When i'm setting the $.fx.off=true the onBefore and onAfter fire almost instantly (which is ok, it's what i wanted with disabled effects), but they also probably have the wrong IDs. Now the pairing is "before7 / after7".

onBefore Wed Jul 27 2011 16:29:36 GMT+0200 (W. Europe Daylight Time) 7
onAfter  Wed Jul 27 2011 16:29:36 GMT+0200 (W. Europe Daylight Time) 7
onBefore Wed Jul 27 2011 16:29:41 GMT+0200 (W. Europe Daylight Time) 8
onAfter  Wed Jul 27 2011 16:29:41 GMT+0200 (W. Europe Daylight Time) 8
onBefore Wed Jul 27 2011 16:29:46 GMT+0200 (W. Europe Daylight Time) 0
onAfter  Wed Jul 27 2011 16:29:46 GMT+0200 (W. Europe Daylight Time) 0
onBefore Wed Jul 27 2011 16:29:51 GMT+0200 (W. Europe Daylight Time) 1
onAfter  Wed Jul 27 2011 16:29:51 GMT+0200 (W. Europe Daylight Time) 1

I have worked around this in my onAfter Handlers for now, but i think this behaviour is a bug.

Pointed out by JFK, it might be related to "animation queue buildup"
Couldn't replicate the issue easily, but it happens in both cycle full version and lite version.

Details at
http://groups.google.com/group/fancybox/browse_thread/thread/6d938bf6a61a8062/fd59af39e6a18a7d

A small copy & past failure :

in line 485 : $slides.height(opts.height); should be $s.height(opts.height);

Having a large number of <IMG> elements in your markup slows down loading other parts of the page (specifically images in CSS, and especially in IE). Consequentially, even though from the ~2nd slide onwards they don't need to be immediately visible, they can slow down the loading of the rest of the site.

It would be really cool if there was an option in Cycle that allowed you to markup the slideshow using <A> tags with the <IMG> SRC attribute in their HREF attributes. Then cycle would automatically preload the files and insert the <IMG> tags for the slideshow. This can be done manually, but it'd be nice if it was a feature/option included in Cycle.

Doing setTimeout (or setInterval) based animation tends to get laptops at rather high CPU usage so fans go on for their duty cycle on http://www.malsup.com/jquery/cycle/, or even for a basic fade $('#movie').cycle(); like at http://mashlogic.com/.

Have you considered doing the animations in SMIL (http://www.w3.org/TR/SMIL2/ -- an open standard backed by the W3C, widely supported and implemented in all the major modern browsers)? That shoves the resource critical loop out of javascript space, where it doesn't boost CPU usage.

(The Fade example at the end of http://u.nu/86u8 exemplifies the difference between declarative animation and imperative code, where that page isn't measurably cpu bound, or at least not on the same order of magnitude as jQuery Cycle is.)

My issue is with the documentation located at http://jquery.malsup.com/cycle/options.html

It says, "activePagerClass: 'activeSlide', // class name used for the active pager link"

It should say, "activePagerClass: 'activeSlide', // class name used for the active pager li element"

This typo causes confusion as in the thread below.
http://forum.jquery.com/topic/jquery-cycle-activepagerclass-assigned-to-wrong-element

The solution Malsup proposed in the thread over the confusion doesn't work in my case.
I found a workaround for my issue though.

After v2.80 a.activeSlide does recognize CSS change (ie. a.activeSlide {color:#fff})

I sent a pull request for a feature to remember the last slide when refreshing the page. It adds 3 options:

rememberLastSlide - True/False turn on remembering the last slide
rememberLastSlideCookieName - Name of the cookie. Useful when you have multiple slides on the same page.
rememberLastSlideTime - Amount of time in days to remember the cookie. Set to null to use session cookie.

This feature requires the cookie plugin.

Like scrollHorz, that turns right or left when going backwards or forward

When cycle plugin effects are used with semitransparent PNG images, Internet Explorer (all versions, except IE9) makes semitransparent pixels opaque.
The solutions is to add void "filter" property for IE during animation.
I used 'custom' effect with animIn and animOut options with properties {filter: '', ...}
But it would be great to add this hack (only for IE) to all effects by default.

Currently jQuery Cycle assigns a width defined in pixels to the containing element. It would be nice to be able to assign the width as a percentage for use in certain situations.

Hi there,

I think there is a bug with cycle when the fx is none the opts.currIndex doesn't get updated properly on after event. What happens is that the index in the after event remains 0 for the first 2 times then it increments properly. Check the code below:

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

        $('#tips').cycle({
            fx: 'fade',
            next: '#next',
            prev: '#prev',
            startingSlide: 0,
            timeout: 5000,
            after: onAfter
        });

Regards DotnetShadow

Hey guys,
It will be nice if you can teach "cycle" to work with only one type of selectors, for example with [a] only or with any other
example:
[div class=rotator]
[div class=frame]
[a href="#"]img[/a]
[a href="#"]img[/a]
[a href="#"]img[/a]
[navigation][a][/a][/navigation]
[/div]

The deal, is to teach cycle select only [a] tags and rotate only them, because now, we need to wrap [a] tags in addition div blocks.

[div class=rotator]
[div class=frame]
[div class=slider]
[a href="#"]img[/a]
[a href="#"]img[/a]
[a href="#"]img[/a]
[/div]
[navigation][a][/a][/navigation]
[/div]

With version 2.88 the images are smaller at first load. When reloading the page and probably using the browser cache to load the images it's correct.

Stijnbe

For some odd reason, the player isn't pausing when I send the pause command. Here's the code, I'm going to check out the project and do some debugging to figure out why.

(function($){
    $(document).ready(function(){
        var atlasOptions = {
            fx: "scrollHorz",
            timeout: 10000,
            pause: true,
            next: ".forward-button",
            prev: ".previous-button"
    };

        var atlasSlides = $("#atlasFeature .slides").cycle(atlasOptions);

        $("ul.slides li a").colorbox({
            transition: "none",
            onOpen: function(){
                console.log("pause");
                atlasSlides.cycle("pause");
            },
            onClosed: function(){
                console.log("resume");
                atlasSlides.cycle("resume");
            }
        });
    });
})(jQuery);

As you can see, the console logs run on click, but the cycle plugin does not get paused.

When we set nowrap to true and assign prev and/or next links, the prev don't run when currSlide is 0 and next don't run when currSlide is slideCount. Pretty fine.

But, if a button will not perform any action, this button would be displayed with any change, like a disabled state, wich is good to usability.

I had changed the Cycle code here to obtain this need, creating two new options: disabledPrevNextClass (with the default value "disabledSlide") and updatePrevNextLink with a "callback fn invoked to update prev and next links if it are disabled or not (adds/removes disabledPrevNextClass style)".

I think this feature is very important with the nowrap scenario.

PS.: If you want to see my complete code, you are welcome.

I was trying to set a different duration between animations for each slide. I saw in the functions that you have:

timeoutFn: null, // callback for determining per-slide timeout value: function(currSlideElement, nextSlideElement, options, forwardFlag)

can you explain to me if and how it would be possible if there are 5 slides to make the first slide visible for 20seconds and another 8 sec and then maybe 5sec for the rest?

Any info would be much appreciated!

• Noah

I'm trying to control slide effect dynamically but it seems that 'fxFn' option doesn't work.

I'm currently dealing with some… well, non-slideshow use for your slideshow plugin and I want cycle to go just one slide further after the user clicked somewhere.

My solution is counting objects and using the slide number (and it works), but I'm pretty sure "next" and "prev" commands in cycle itself would be quite useful.

When using the after callback from this demo:
http://jquery.malsup.com/cycle/after.html

If there is only 1 slide then both controls are shown instead of being hidden. I can understand why the plugin wasn't designed to work with only 1 slide, however if the plugin is used with a CMS then this can be the case.

Is there a way to fade out the previous slide to the background color then fade in the next slide. I know this isn't an issue to apologies, just a question.

I have used your plugin for full screen images (instead of say something like supersized) and fading the previous before the next one would improve performance considerably for this.

Cycling through anchor tags with images embedded in them results in every slide linking to one of the slide's link path, and not the others. (I think it's "example.com/3" in the example below. I'm not sure whether it's the first or last...)

ex:

Switching to the regular jquery.cycle.min.js fixes this problem.

Perhaps this has to do with the "display: none;" style not being dynamically applied to each inactive slide, as I've noticed that jquery.cycle.lite does not do this, but jquery.cycle.min does do this.

Hello Mike,

Thanks for your excellent module.

I'm using the Drupal views_slideshow module (6.x-2.x), which uses the cycle plugin, and I have an issue with padding of thumbnail tabs. I've talked to the maintainer rednahead and he has no idea why it happens or how to solve it.

Basically if I add no padding hovering to active the slide works nice. If I add a little bit of padding, when hovering it skips the sliding effects - it just skips/blinks instead. There is no smooth effect. Ironically, if I use an overload of padding, it works really smooth if I only hover/touch the padding areas.

I've explained the issue here. I've set up two demo sites. http://drupal.org/node/1239586#comment-4825678

Thanks in advance.

Cheers,
Danny

As the title says - the pager option is currently documented on http://jquery.malsup.com/cycle/options.html to be a selector, but since it is only used in a $() one can equally well set it to a jQuery object. Sending a jQuery object might be easier if you have multiple cycles on a single page since then you don't have to create unique id:s for each one of them.

You use parseInt quite a bit in your code without supplying the radix, which can cause some unwanted behavior.

parseInt('010') === 8;

use:

parseInt(val, 10);

Looks like all of the docs pages suggested in the wiki are throwing 403 errors. It's possible to get the old docs from Google's cache, but would it be possible to either add them to the wiki or get those pages back up?

Sync: 0 with a speed set < 4000 causes the cycle to stop after 1 transition.

Hi,
I've been using your plugin a lot lately showing off a page cycling images for an extend period of time and it looks like after a couple of hours it freezes.

My hypothesis is that the circular reference inside the "go" main engine function leaks memory and at some point the Javascript Interpreter stops it.
I'm not sure about it but I think I'm pretty close.

My solution to the issue is to trigger an event called "cycle.jquery" and catch it somewhere else and then set the timeout to call the "go" function.

Have a look and tell me what you think about it:

@line 60
return this.each(function(){
options = handleArguments(this, options, arg2);
[...]
// bk patch
$(window).bind('cycle.jquery', function(e, p, els, opts, tmp, opts_rev, ms){
p.cycleTimeout= setTimeout(function(){ go(els, opts, tmp, opts_rev) }, ms);
});
// if it's an auto slideshow, kick it off
if (opts.timeout || opts.continuous) {
//this.cycleTimeout = setTimeout(function(){go(els,opts,0,!opts.rev)}, opts.continuous ? 10 : opts.timeout + (opts.delay||0));
$(window).trigger('cycle.jquery', [this, els, opts, 0, !opts.rev, opts.continuous ? 10 : opts.timeout + (opts.delay||0)]);
}
});

@line 471
function go(els, opts, manual, fwd) {
[...]
if (ms > 0) {
//p.cycleTimeout = setTimeout(function(){ go(els, opts, 0, !opts.rev) }, ms);
$(window).trigger('cycle.jquery', [p, els, opts, 0, !opts.rev, ms]);
}
}

I'm pretty sure this can be done in a cleaner way but so far this solution is the one working for me.

Cheers.
David

When the cursor is over the cycle on initial page load the pause on hover option becomes reversed. Moving the cursor off the cycle resumes the cycle and vice versa.

On line 296, changing this.cyclePause++; to equal true and this.cyclePause++; to equal false fixed the problem for me. I did the same for pauseOnPagerHover on line 777.

on line 176: go(options.elements, options, 1, (!opts.rev && !opts.backwards));

opts.rev and opts.backwards should be options:

go(options.elements, options, 1, (!options.rev && !options.backwards));

Currently the plugin assumes using anchors as pagination elements but, since the pagination doesn't show up with Javascript disabled and for usability and semantics sake, I would prefer to use <button> type elements instead.

It's actually possible to use any element as a pagination one, but doing that, the plugin loses some of its functionality.

Currently jQuery Cycle assigns a width defined in pixels to the containing element. It would be nice to be able to assign the width as a percentage for use in certain situations.

I noticed this when updating from v2.75. When I call $.cycle('pause') the animation pauses, by the pagination keeps going.

Runing a diff between last and this version shows that the following code block is now outside an if statement that checks if the animation is paused.

// calculate the next slide
opts.lastSlide = opts.currSlide;
if (opts.random) {
    opts.currSlide = opts.nextSlide;
    if (++opts.randomIndex == els.length)
        opts.randomIndex = 0;
    opts.nextSlide = opts.randomMap[opts.randomIndex];
    if (opts.nextSlide == opts.currSlide)
        opts.nextSlide = (opts.currSlide == opts.slideCount - 1) ? 0 : opts.currSlide + 1;
}
else { // sequence
    var roll = (opts.nextSlide + 1) == els.length;
    opts.nextSlide = roll ? 0 : opts.nextSlide+1;
    opts.currSlide = roll ? els.length-1 : opts.nextSlide-1;
}

if (opts.pager)
    opts.updateActivePagerLink(opts.pager, opts.currSlide, opts.activePagerClass);

i'm from germany, so sorry for my bad english ;)

my problem is, that on initialization the before and after callbacks were executed, even though no slide transition takes place. it would be nice to change the behavior or to support an option to disable the before and after callback-execution on initialization.

I've a problem with the excellent cycle plugin on this site: http://www.closeinternational.com

The activeSlide class for the pager doesn't seem to want to change although everything else is working. I'm using version 2.88.

I've found this when trying to find a workaround to achieve #8.

I was trying to override this function:

$.fn.cycle.updateActivePagerLink = function(pager, currSlide, clsName) {
    $(pager).each(function() {
        $(this).find('a').removeClass(clsName).filter('a:eq('+currSlide+')').addClass(clsName);
    });
};

With a similar one:

$.fn.cycle.updateActivePagerLink = function(pager, currSlide, clsName) {
    $(pager).each(function() {
        $(this).children().removeClass(clsName).filter(':eq('+currSlide+')').addClass(clsName);
    });
};

via the default opts:

// (...)
updateActivePagerLink: function(pager, currSlide, clsName) {
   $(pager).each(function() {
       $(this).children().removeClass(clsName).eq(currSlide).addClass(clsName);
   });
} // callback fn invoked to update the active pager link (adds/removes activePagerClass style)
// (...)

and it wasn't working. The cycle was working, but updateActivePagerLink wasn't being overridden.

It seems to work fine when function is overridden per element, though.

Hi,
I think you need to add a $(this).stop(true) to the section of code that destroys/stops the cycle plugin, because otherwise previous animations will restart on the same element if the user attempts to rebind with cycle()-

A way of adding images to the slideshow without the load/requeuing showing a flicker of all images that are being loaded. This doesn't give users a too good impression.

Over at drupal, we're trying to get a couple of new features into a module that uses this (very nice) plugin: http://drupal.org/node/515356

Specifically, the option to delay the slideshow on the last slide (or manually specify the delay on the last slide). It might also be good to allow a manually delay over ride on an arbitrary nth slide, dunno

And the option to redirect the browser to a given URL after the slide show has run through once.

Are these features that you think would be good to have in core Cycle Plugin, or should we just add them on to the drupal module version?

Hi,
I'm having an issue displaying PNG images with a transparent background.
When I display an image by it's self, there is no transparency problem. But when I put them in the slideshow with a group of images, it is not transparent and it shows a white box around the image. Any help would be appreciated.
Thanks

I was wondering if it would be possible to add a callback to opts.addSlide - it would make doing things after a new slide has been loaded in much easier.

I'm fetching a block of markup to use with $.cycle, using the $.load() function with a callback to do the init. On the first load, everything looks and works great.

However, when using the 'pager' option, things get a little weird when trying to empty and load/reload another block of html. The slides continue to run in sequence, but the activeSlide pager doesn't match the current slide. I can't quite identify the pattern -- sometimes the pager skips back then forwards, sometimes it's just off by a few numbers.

Demo: http://www.kapow.com/cycle/

Is there a method to "destroy" the cycle object? I've tried unbind(), die(), remove(), empty()...

On the options reference page (http://jquery.malsup.com/cycle/options.html), there is no mention of the "center" option which allows the user to force the slideshow images to be centered within the container. Very useful - I specifically looked for it and could not find it. I only learned of it via an external blog post.

Please add "center" to the options reference.

Thanks,
Wes

Hello,

I can not change the speed of the scrolling images. I have noticed when doing this (speed) but nothing works. I went from version 2.72 to the final but that does not work . If you have a track to slow the slide I'm listening
Thank you for your help

Rino

Hello - I have posted on stackoverflow - but thought this might be a better place to get help ( http://stackoverflow.com/questions/5220057/jquery-cycle-before-function-to-complete-before-animating-to-the-next-slide )

I'm using the jQuery Cycle plugin for a slider - I need to complete a function when the next link is clicked before the slider moves onto the next slide.

$('#marques-slider').cycle({
fx: 'scrollHorz',
transition: 'scrollHorz',
timeout:  0,
prev:    '#prev-slide',
    next:    '#next-slide',
    pager:   '#nav', 
    easing: 'easeInOutExpo',
    speed:  1000,
    before:  slideUp, 
    after:   slideDown,
    startingSlide: 1
});

At present both my onBefore function and the next slide function are animating at the same time.

I also tried creating the next links outside of the plugin:

            $('#next-slide').click(function(){
                $('.marques-product-content').animate({
                    height : '0'
                }, function(){
                    $('#marques-slider').cycle('next');
                });
                return false;
            });

but this causes some funky behaviour with the slides backfground images changing before animating and the function is only working on the first click :/

At the moment I can't see anyway to prevent the next action firing before the 'before' function is complete. I'm using the code below.