malsup / cycle2 Goto Github PK
View Code? Open in Web Editor NEW2nd gen cycling
2nd gen cycling
Hi,
I'm using Cycle1 and have no problems, but when I try to upgrade to Cycle2, all of my images stop loading, even those whihc are not in the slideshow.
Perhaps I have a conflict with my Tabs and Lightbox scripts? I am using:
My images are loaded by Jquery so that I could make the large images load after my icons have loaded. So perhaps my image loading is the conflict?
Here is my page which is working with Cycle1 (but won't with 2), view my code with Firebug, perhaps you can see the issue at a glance?
Click on the 6th icon (decahedron) to see slideshow.
http://instancia.net/portfolio/index.php
Thanks!
im trying to fix a carousel banner with your plugin like jcarousel.
but i have some problems,
When setting up centerVert programatically, I have to use the work-around of triggering resize on the window or the image won't center.
After triggering (or manually resizing the window ofc) everything is fine.
in combination with autoHeight:'calc' this really is what most other sliders are missing! nice job!
$(document).ready(function() {
$('#someslideshow').cycle({
centerVert: true
});
//workaround:
$(window).trigger('resize');
});
http://www.dietersteinbach.com/kunden/faces-in-studio/
I've sometimes had a bug now, which can be more or less reproduced:
After a while, two images are visible at the same time: http://imgur.com/tnMju
furthermore, the controls (next / prev) are one step behind.
Just an idea - maybe swiping too fast causes the issue? Like if you start the next swipe even before the previous one has properly executed the slide transition?
I found a few errors that kept popping up while trying to remove slides from an existing slideshow. Pull request coming.
I really, really like your cycle2 plugin for all my mobile sliders.
But the sentinel slide can cause several problems, if a pane or some of its children have an id. So this id is doubled when a sentinel slide is created which leads to incorrect results when using document.getElementById or (inQuery) $('#id'). It only returns the first (= the one in the sentinel) element.
The only solution right now is not to use a dynamic height (so no sentinel slide is created), but I would like to use auto-height="calc" AND ids.
When I include cycle2 using:
<script src="..." async></script>
I get Uncaught TypeError: Cannot read property 'autoSelector' of undefined
If I remove the async property the script works fine.
I did some debugging, and it's looks like you need to move the domready function to the bottom of the script
https://github.com/malsup/cycle2/blob/master/jquery.cycle2.core.js#L496
because it's firing before the default are set
https://github.com/malsup/cycle2/blob/master/jquery.cycle2.core.js#L551
You can see the especially when using window.resize() on a destroyed cycle, as it's still trying to calculate the center.
I'm putting together my first slideshow with Cycle2 and I already need pagers & progressive loading. I don't know if this constitutes an uproar, but I can imagine using this quite a bit. I have a workaround where I swap out a placeholder gif with the main image, but it would be really cool if Cycle2 supported this natively! :-)
This code works in cycle1 but not in cycle2.
$(this).parent('.element').find('.slides').cycle({
fx: 'scrollHorz',
timeout: 0,
manualTrump: false,
next: $(this).parent('.element').find('.next'),
prev: $(this).parent('.element').find('.prev'),
});
images is in LI elements.
Firebug says
"TypeError: opts is undefined
[Break On This Error]
if ( opts.slideCount < 2 ) {"
And with .min
"TypeError: c is undefined
[Break On This Error]
...(document).on("cycle-destroyed",function(b,c){c._sentinel&&c._sentinel.remove(),..."
Best shown with an example:
$('#parent-slideshow').cycle({
timeout:0,
slides:'.slide-item'
});
$('.child-slideshow').cycle();
$('#parent-slideshow').on('cycle-before', function(e, opts, curr, next, flag){
alert('parent');
}
<div id="parent-slideshow">
<div class="slide-item">
<div class="child-slideshow">
<img src="xxx.gif"/>
<img src="xxx.gif"/>
<img src="xxx.gif"/>
</div>
</div>
<div class="slide-item">
<div class="child-slideshow">
<img src="xxx.gif"/>
<img src="xxx.gif"/>
<img src="xxx.gif"/>
</div>
</div>
</div>
Obviously when I transition on #parent-slideshow I expect 'parent' to be alerted, but 'parent' also alerts on transition of #child-slideshow.
Hope I've explained that thoroughly enough?
Many thanks,
Shaun
If you look at [link removed] in a Webkit browser, you'll see the top carousel (under What's On) shows four items nicely spaced (which is what I want) while the one underneath shows the first and last cut off.
View the same page in Firefox or IE and it's the second carousel that displays correctly with the first one only displaying three items.
The first carousel uses data-cycle-carousel-offset="25" while the second uses data-cycle-carousel-visible="4".
Is this a bug with the script or is it a case of user error?
Hi malsup,
I was using $(el).cycle('add', newSlide) and the one thing I'm missing right now is adding slide after specific index, similar functionally you have right now with removing slide by zero-based index.
What would be the best way to go about that?
Cheers!
When loading images from a CDN and using the loader plugin, every 2nd slide seems to skip the timeout between transitions. I can't reproduce the symptoms without "data-cycle-loader=true".
Replicated in Chrome 24, Firefox 15, Safari 5.1.7.
in some cases if text would normally wrap in a slideshow element, it overflows insiead of wrapping, if carusel is used.
see:
http://dl.dropbox.com/u/4130873/it-modalrnd2b.html
the text wraps normally if carousel is disabled in this slideshow
testedin ff and ie.
here is an anything-slider version of the page, to illustrate what i'm trying to do:
http://dl.dropbox.com/u/4130873/it-modalrnd-as.html
The following three problems occur when opts.carouselVisible > opts.slideCount
and cause unexpected results when there are fewer slides to display than "slots" to display them in.
In cycle.transitions.carousel.postInit()
line 47 opts.carouselVisible
is set to opts.slideCount - 1
. Instead, carouselVisible
should be set to slideCount
:
opts.carouselVisible = opts.slideCount;
In cycle.transitions.carousel.postInit()
line 87 opts._nextBoundry
is set to opts.slideCount - opts.carouselVisible
. But _nextBoundry
is only used when the cycle-update-view
event is fired, which already happened BEFORE postInit()
. A quick fix is to add the following afterwards:
opts.API.updateView();
In cycle2.js cycle-update-view
event line 1126 var nextBoundry = opts._nextBoundry || opts.slideCount - 1
has unexpected results when opts._nextBoundry
is 0
. I've changed the line to read:
var nextBoundry = opts._nextBoundry !== undefined ? opts._nextBoundry : opts.slideCount - 1;
These were quick fixes. There may be better solutions.
(I didn't see any other mention of this but it may already have been addressed as I imagine it would be a popular feature.)
I don't see an option to display slides in random order. I was able to use an extra bit of jQuery to randomize the slide elements before the slideshow begins, but are there plans to include a random option as in the original Cycle?
Thank you for the continued development of all your plugins, particularly these simple and flexible rotators! Cycle2 is great!
I build my interesting simple site http://www.mytintin.1866.co recently.
I use your graceful cycle2 plugin, it's a great job.
When I use tile effect, I find a strange issue:
/* code snippet */
$('div#photoContainer').cycle({fx: 'tileBlind'});
$('div#photoContainer').cycle('resume');
$('#destroyButton').click(function(){
$('div#photoContainer').cycle('destroy');
});
/* end of code snippet */
The "destroy" command will issue error message in console:
Uncaught TypeError: Object # has no method 'opts'
I explore the jquery.cycle2.tile.js(version: BETA-20120910)
onDestroy: function( e ) {
var opts = this.opts();
opts.container.find('.cycle-tiles-container').remove();
}
I print the this keyword, it is the opts.container itself!
I modify the code as follow:
onDestroy: function( e ) {
$(this).find('.cycle-tiles-container').remove();
}
Then the error will never occur.
Expect for your verification.
Thanks!
I suppose the differents betwen prod and devel on download page should by only "compression" of code. If not this Issues is pointless
Anyway, if I use prod version you cant use command destroy i got this error:
[cycle2] cycle-stopped jquery.cycle2.js (line 500) TypeError: this.opts is not a function
If I use devel version, everting works fine
(btw, i append plugin into main file,...)
Greetings from Czech, E
If you use pause-on-hover and have navigation buttons that are outside of the main 'cycle-slideshow' div, the slideshow does not pause when the buttons are hovered.
hy,
would it be possible to add keyboard navigation to the cycle plugin?
So you can switch through the i mages by using the keyboard keys.
In my last project, i added it manually:
//gallery keyboard evetns
$(document.documentElement).keyup(function (event) {
if (event.keyCode == 37){
$('.slider').cycle('prev');
}else if (event.keyCode == 39){
$('.slider').cycle('next')
}
});
Hi, I need use currentslide and maxslide in my javascript, but I don't know how I do this.
Thanks.
Hi Mike,
i'd be great if you either commented the dev versions of the FXs, or put some docs up on howto modifiy or create custom FXs.. i finally moded scrollVert to my likings, but it took me some try & error poking, since on first sight it's rather blurry what's going on ;)
Other than that: i do like C2 a lot.. cudos! It just saved me from a nasty bug C1 threw in Safari.
btw: i was thinking about how i could actually pass options to a FX rather than hacking it.. i wondered if additional data-* attributes would make sense, or something else.. do you have something up your sleve allready?
cheers,
Jan
When using swipe gestures for next/prev navigation, if you touch into the slideshow and make an "L" gesture, by either first dragging down and left, or up and right, 2 issues occur:
This can also be triggered with 2 separate gestures. If you first swipe down (to scroll), and quickly swipe left or right within the slideshow node before the original vertical scroll animation has finished, you see the same results.
Using Mobile Safari in iOS6, tested on iPad and iPhone. The first issue above can be seen on http://jquery.malsup.com/cycle2/demo/swipe.php
I use this carousel:
<div class="azz"
data-cycle-fx="carousel"
data-cycle-timeout="0"
data-cycle-carousel-visible="3"
data-cycle-carousel-fluid="true"
data-cycle-prev=".prev"
data-cycle-next=".next"
data-cycle-log="false"
data-cycle-slides="> a > img"
>
<a class="fancybox" rel="carousel" href="http://placehold.it/130x130">
<img alt="" src="http://placehold.it/130x130" />
</a>
<a class="fancybox" rel="carousel" href="http://placehold.it/130x130">
<img alt="" src="http://placehold.it/130x130/ff0000" />
</a>
<a class="fancybox" rel="carousel" href="http://placehold.it/130x130">
<img alt="" src="http://placehold.it/130x130/eeeeee" />
</a>
<a class="fancybox" rel="carousel" href="http://placehold.it/130x130">
<img alt="" src="http://placehold.it/130x130" />
</a>
<a class="fancybox" rel="carousel" href="http://placehold.it/130x130">
<img alt="" src="http://placehold.it/130x130/333333" />
</a>
<a class="fancybox" rel="carousel" href="http://placehold.it/130x130">
<img alt="" src="http://placehold.it/130x130/bbbbbb" />
</a>
</div>
</div>
Why the links href don't work?
Thank you
Go to http://jquery.malsup.com/cycle2/demo/carousel.php Non-Circular Demo and click Next four times while at the end of the slides. Now click Prev. It won't go back until you click Prev four times.
The problem: currSlide
advances beyond slideCount + carouselVisible
and causes unexpected behavior.
My fix (applied outside of the library) modified from jquery.cycle2.js line 696:
var c2 = $.fn.cycle;
$.extend( c2.API, {
next: function() {
var opts = this.opts();
var count = opts.reverse ? -1 : 1;
if ( opts.allowWrap === false && ( opts.currSlide + count ) > opts.slideCount - opts.carouselVisible )
return;
opts.API.advanceSlide( count );
opts.API.trigger('cycle-next', [ opts ]).log('cycle-next');
}
});
Notice ==
changed to >
and - opts.carouselVisible
added.
Move the assignation of the active class to when the transition starts. At the moment the active class becomes assigned after the the transition has completed โ which can look not so smooth.
I have a carousel nav that controls a slideshow and when an item in the carousel is clicked I think the user will expect the state to change then not when the transition has completed.
I looked at the code, but I couldn't seem to switch the order of opts.API.updateView(); without breaking the active class totally.
I hope that makes sense?
Many thanks,
Shaun
Hi Malsup,
Firstly I would like to thank you for your continued work. Cycle has always been my slideshow plugin of choice and the release of cycle2 is really a dream come true!
I was wondering why using data-cycle-hash on the slides cause the autoplay to not work?
For the original cycle - I used hash change with functions such as:
onPagerEvent: function (idx, slide) {
hasSlid = 1;
window.location.hash = $(slide).data('title');
return false;
}
Is there anything that would similarly work?
Many thanks in advance!
Hello
Is there currently a way to have slides containing various HTML to progressively load images contained within the HTML? It would be good not to have to include all the HTML in JSON, but only the images.
Example markup
<li>
<h3>Slide 1</h3>
<p>Some Text</p>
<div id="img-1" class="img-wrap"></div>
</li>
<li>
<h3>Slide 2</h3>
<p>Some Text</p>
<div id="img-2" class="img-wrap"></div>
</li>
Example JSON
[
{ "img-wrap":"#img-1" , "img-src":"images/img-1.jpg" },
{ "img-wrap":"#img-2" , "img-src":"images/img-2.jpg" }
]
Thanks for a great V2 of the cycle plugin.
Hello Mike,
again thank you for this script. It is amazing!
We got a issue with your carousel in IE8. It works until you slides away a few divs and after a while a issue with a visible margin in the script.
I have two screenshots that shows the issue first from the start when it works smooth and perfect http://sr.dev.saturate.se/start1.png and then later I started to use the arrows back and forward and the problem is visible, http://sr.dev.saturate.se/start2.png
Any ideas?
I can pass you the link to the developer server but I rather not send it here in public on Github.
Alex
When compiling cycle with YUI-Compressor it fails because goto is a valid javascript identifier. and shouldn't be used as a object identifier.
https://github.com/malsup/cycle2/blob/master/jquery.cycle2.command.js#L76
Awesome plugin! I've been a long time fan since version 1.
Is there a preferred method to specify the number of slides to advance in a carousel?
I tried overriding the advanceSlide function in order to create functionality to skip forward and backward over multiple images in my carousel. But things don't seem to work as expected.
Hello,
It seems that the first slide shown is not triggering the cycle-before event.
I know we have the cycle-initialized event, but I would suggest to call cycle-before even for the first slide so that we can bind an event to the first element without any tricks.
If this is the expected behavior, it would be very useful to have a "cycle-will-start" where, one of the parameters, is the first slide in the list.
Here is a code example in which I did need to use the jQuery ":first" selector to bind an event to the first slide:
$.each(slides, function(i, promo_slide) {
url = baseUrl() + 'uploads/promos/' + promo_slide.mobile_image;
content = '<img data-promo="' + promo_slide.id + '" class="promo_slide" src="' + url +'"/>';
$('.cycle-slideshow').cycle('add', content);
});
// Here I needed to use the ":first" selector
$('.cycle-slideshow .promo_slide:first').unbind('click');
$('.cycle-slideshow .promo_slide:first').click(function(e) {
e.preventDefault();
window.localStorage.setItem('view_promo_by_id', $(this).data('promo'));
changePage("detalhe_promocao.html");
});
$('.cycle-slideshow').on('cycle-before', function(e, opts, outs, ins) {
$(ins).unbind('click');
$(outs).unbind('click');
$(ins).click(function(f) {
f.preventDefault();
window.localStorage.setItem('view_promo_by_id', $(this).data('promo'));
changePage("detalhe_promocao.html");
});
});
I have a slidehow where the images (coming out of wordpress) are limited in height, rather than width.
On mobile devices, the usual max-width & height = auto approach is used, and so I need to set height for sentinel by using auto-height = calc.
However, the picture picked seems not right.
if ( autoHeight === 'calc' ) {
// calculate tallest slide index
opts.slides.each(function(i) {
var h = $(this).height();
if ( h > max ) {
max = h;
autoHeight = i;
}
});
}
It's clear to see that you only compare for height, and not for ratio.
I'm working on a solution and will post an update.
Hey.
Im wondering if i understand your documentation wrong.
i got the following script:
$('.slider').cycle({
after: function(){
alert('hmm');
},
swipe: true,
speed: 1000,
timeout: 1000,
overlay: '.slide_overlay',
overlayTemplate: '
and following html:
It all works perfect exepct for the part where im trying to use after:
Nomatter what i do i cant get it to work, what am i doing wrong here?
i even tryed before and it aint working either wont run the alert.
Also i got a isecond question, im wondering if theres a easier way to detect if the {{title}} or {{cycleRel}}
than having to use the after:
Reason is i need it to hide the "slide_overlay_inner" if either {{title}} or {{cycleRel}} is empty
Hope i made myself clear on what i needed and hope that your able to help out.
Greets
Martin
My slides are made up of a div that contains an image and some text, and when they transition using horizontal scrolling, the text of each slide is overlapping the text of the slide coming in from the right.
Any thoughts? I can't apply a width to the slide because it's being used in a responsive layout.
Cycle had some great demos of nested sliders. I'm not completely sure nested sliders are possible with cycle2, I assume they are but there isn't a clear demo available on http://jquery.malsup.com/cycle2/demo/ -- Would really appreciate this.
Thanks.
Hi.
In my Cycle2 Slideshow, the second slide is the longest one. So because cycle 2 determines the height based on the first slide, the second one gets cut off.
Is it possible to determine the height based on the longest slide, no matter if its first, second or what ever?
Thank you.
First of all, this plugin is the amazing one I had used. Many thanks for your effort.
Two suggestions for request:
Suggestions just for your reference.
Best Regards.
I use the "Default Slideshow" with some configurations:
jquery.cycle2.min.js (BETA-20120923)
jquery.cycle2.tile.min.js (BETA-20120923)
<ul class="cycle-slideshow"
data-cycle-timeout="5000"
data-cycle-pause-on-hover="true"
data-cycle-speed="500"
data-cycle-slides="> li"
data-cycle-fx="tileSlide"
>
<li> <img src="image1.png" alt="" /></li>
<li> <a href="/lorem/"><img src="image2.png" alt="" /></a></li>
<li> <a href="/ipsum"><img src="image3.png" alt="" /></a></li>
</ul>
And i see those console.log's:
[cycle2] --c2 init--
[cycle2] fx: tileSlide (string)
[cycle2] slides: > li (string)
[cycle2] speed: 500 (number)
[cycle2] pauseOnHover: true (boolean)
[cycle2] timeout: 5000 (number)
can i disable that?
if i'm in development, its cool - but if i go live with a project, would be good i could disable it.
This issue has been noted when the carousel option is used.
I've discovered a bug that makes the curr value for the cycle-after callback point to the wrong slide in the following instances...
a: you click on a paging item before the first slide has transitioned( if using a timeout value).
b: when not using a timeout.
Strangely, the bug fixes itself after you've transitioned through all the slides!
Hi,
I tried to listen to 'cycle-initialized' (and then to any of initialization event) but they aren't called.
Events like cycle-resumed, cycle-before, cycle-update-view etc. are working.
No luck with cycle-initialized or any of the initialization events.
I'm using this URL for testing.
http://malsup.github.com/jquery.cycle2.js
Hi,
i have a problem with the Mustache-style templates used in cycle2 because i use Twig Templates which use the same Mustache-style template.
My Example :
In my file i wrote this piece of code :
and in the browser when i look the source code, i find:
Twig replace the cycle2 template !
I found the default style for the template is in the file jquery.cycle2.tmpl.js
I could change this in the file but can we imagine to make an option for changing the template style ?
thanks
Kspal
...could there be an option for scolling through all slides in the middle?
Eg. I'm on the first slide, then I'll click to go to 4th slide, when it would slide through slides 2 and 3.
br, Marko
Hi
I've got a project with a custom slideshow that I'd be interested in swapping out for Cycle2.
The slideshow in question uses divs with background images. The divs themselves are 100% width /height and use background-size:cover to get a "full screen" effect.
A quick test suggests cycle2 is not compatible with that. A wrapper containing lots of images works just fine:
<div id="gallery" class="cycle-slideshow auto">
<img src="im1.jpg">
<img src="im2.jpg">
<img src="im3.jpg">
</div>
Replace this with background image divs and it doesn't work, the divs are present in generated markup but they're all set to display:none
<div id="gallery" class="cycle-slideshow auto" data-cycle-slides="div">
<div style="background-image:url(im1.jpg)"></div>
<div style="background-image:url(im2.jpg)"></div>
<div style="background-image:url(im3.jpg)"></div>
</div>
Am I doing something wrong or is this never going to work?
thanks
Hello,
Which browsers are supported (IE) ?
thx
Hey Mike! First of all, great stuff on Cycle 2.. it's really an upgrade! Thanks for that!
I'm experiencing a bug with the slider not running the Before and After callbacks on the first slide. It's just happening on the first time the first slide appears and afterwards they are running as usual. So it's just happening on the very first slide.
Any clue on what to modify to solve that?
P.S. Functions are binded on "on" as in the documentation and called on document.ready.
Hi,
I used carousel plugin and bookmarking stopped working. When I remove carousel, bookmarking starts working again.
I detected when I reload the page with hash. When using carousel, slide with that hash did not load. Only the first slide. After this all slide changes went to wrong slide.
I had the latest production versions.
br, Marko
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.