Is there a way to create strip transition effects similar to Nivo Slider with jquery cycle?

Question

I'm a big fan of the jquery cycle plugin yet it would be cool if it had some more complex transition effects similar to Nivo Slider or jqFancyTransistions.

I understand the jist of how to create custom effects with jquery cycle, yet I'm having a hard time trying to figure out how to create the strip transition effects similar to nivo slider and jqfancytransitions or if its possible at all in jquery cycle. Any help on this would be greatly appreciated. Thanks!

Inoculate

Hi. I'm interested in this too ...really like Nivo slider effects :D – Horotelic

coin slider is really cool too: workshop.rs/projects/coin-slider – Horotelic

I think, it is really easy. The thing is you need to play with divs and their background-image. Just see the html-code (nivo.dev7studios.com). If you want I can create a simple example later. – Chug

Update: I have generalized the strips to tiles and put many more examples on the demo page. – Indigence

Answer 1

I've whipped up a minimal proof-of-concept demo. It's written as a proper jQuery cycle transition plugin.

Depending on how happy you are with playing with the code, it should provide a good starting point. I have started working from the shuffle transition myself, as that seemed to be the only transition that did more than to manipulate CSS properties, which I think doesn't suffice for what you were aiming for.

Since I've neither used jQuery Cycle before, nor written transition plugins for it, it's entirely possible that I've committed cardinal sins in some details of how it's written.

Also, it can surely be optimized. At this stage, it's written for clarity first, performance second. However, on my (rather fast) machine, the animation and reaction time are fluent and instantaneous.

So, there you have it.

edit: The demo page now includes documentation for additionally exposed options and a few examples that demonstrate how to achieve some different effects just by passing different options.

edit 2: I have generalized the strips to tiles and put many more examples on the demo page.

Indigence

that's nice! do you know how can I fade out the stripes? I tried adding opacity: 0 to animate, but it doesn't work.. – Horotelic

@Alexandra: Humm, that would have been my first approach as well. I can probably look into it tomorrow. Right now, I have to entertain some guests for my birthday. ;) I barely finished the demo in time and avoided frowns. FROWNS I TELLS YA! :p – Indigence

@Alexandra: Shhh, I snuck back in and added fading. For some reason, it doesn't work on the container element I use for the strips, but only on the img element itself. Probably a conflict with other CSS properties I've used. There are certainly other ways to define the structure of the strips that are less prone to conflicts. – Indigence

Thanks Thomas, this is amazing. I just got the email with your comment and checked out your proof of concept demo. Very impressive. This questions been up for about 7 months and I assumed it just wasn't possible but you've proven there is a way. It's late where Im at but tomorrow I'm gonna spend some more time checkin it out. Great work! Thanks again! – Inoculate

do you guys know how can you break the slide into horizontal strips as well, like coin slider does? – Horotelic

@Alexandra: I think coin slider breaks up the image in a number of rectangles, not just into strips that go across either the whole height or across the whole width. I don't see why that shouldn't be possible. I'd wrap the sliding panel in two divs, user the outer one as a mask with the right dimensions, and position the inner div accordingly. However, be aware that coin slider only supports images, whereas jQuery cycle allows for full HTML content in its sliding panels. That flexibility on the other hand means, that I can't just set the sliding element as a background-image of a fitting div. – Indigence

I have added some documentation to the demo page that explains how to use the strips transition. At this point, I think the transition has matured enough for production. Horizontal strips (or even rectangle like in coin slider) can be derived from this implementation. – Indigence

beautiful :D you should contact the cycle plugin author and tell him to include them in his plugin :D – Horotelic

@Alexandra: Update: I have generalized the strips to tiles and put many more examples on the demo page. – Indigence

I have one more question: do you know how could I create functions for each tile effect, but without having to duplicate your tiles function? I mean somehow to call your function inside these functions, but with different tile configuration? – Horotelic

@Alexandra: I'm not sure I understand. I've included code samples for each of the example galleries. With opts.tiles.cssBefore and opts.tiles.cssAfter, you can currently control the tiles animations. opts.tiles.cols and opts.tiles.rows. You only have to include jquery.cycle.tiles.js after jquery.cycle.js. It's possible that I've misunderstood your question. – Indigence

there's a small "bug". if you click next/prev before the animation finishes the current slide turns white – Horotelic

@Alexandra: Thanks for the report. ;) That behavior is currently intentional and by design. I wasn't sure what to do in rapid clicking cases yet, because as far as I can tell at this point, my plugin is not aware that the buttons are being flooded. I intend to handle this more gracefully when I'm more familiar with all the info the plugin has access to. – Indigence

another problem is that when you specify multiple effects, like fx: 'tiles, fade, cover' after the tile effect is finished only the other two will continue to run correctly – Horotelic

@Alexandra: Oh, that's interesting. I didn't even know you could combine different values in fx like that. I'll have to take that into account in my implementation. Thanks! – Indigence

@Indigence hey! i have some issues with your otherwise fantastic transition plugin. Its regarding a layer that consist of a img-tag followed by a span-tag that is positioned over the image. When doing the transitions, its only the image that gets "tiled", and when the animation is finished the span just appears. When using the other transitions like fade, the elements are animated in sync. – Integrant

@PauliØsterø Wow, that was a long time ago (at least in internet time :)). Do you have a link to your page, where I could look at the problem directly? A minimal example on jsfiddle or wherever would be fine, too. – Indigence

@Indigence i knooow :) but i couldn't find any contact information on you, neither on the webpage or on your SO profile so i thought my best chances where to write you here. Thnx so much for replying. You can see the slideshow in action here dhf.dk/?tiles=on, while the normal fade-transitions are here dhf.dk – Integrant

@Indigence i also created a JSFiddle here where you can see how the Cycle plugin is configured. jsfiddle.net/9yRg6/2 – Integrant

@PauliØsterø Yeah, I'm a bit of an internet hermit. ;) I'll have a look and see what I can do. It might take a few days. – Indigence

@PauliØsterø I've forked your jsfiddle into a fixed version that meets your requirements: jsfiddle.net/xAMVj/1 There have been some validation errors in your markups that I cleaned up. The source of your specific problem was this, however: In order to make the tiles, I have to assume that I can safely wrap a slide without breaking the styles. In your case, you had some span > div rules that broke when the tile wrapper was applied. I have fixed this by giving your text panel div a class name, and using that class for the css rules. Ah, I also made the span into a div, for validation. – Indigence

P.S.: I used to play handball as a kid, more than 20 years ago. :) In Flensburg. – Indigence

@Indigence wow, that's impressive! thnx so much. Another side question; my "poor-mans" version of randomizing transition effects, do you see any issues with it? When using it, the transitions where the slide is cut into horizontal or vertical strips doesn't work 100% correct. Sometimes all the strips are not animated in time and half of the slide just appears at once at the end of transition and sometimes there are whole missing strips, mostly when they are animated horizontally. – Integrant

@PauliØsterø Best guess: In "before", you only set options.tiles.order if your randTiles hash has its own order function. Fair enough. However, since you have set it before, the order function might not match the grid of tiles. This specific issue is fixed here: jsfiddle.net/xAMVj/15 I have fixed it by categorically setting the identity map as the order function, and then overwriting it, if an order option is defined. – Indigence

@Indigence you're so right... i updated it here, just defining all the parameters for each transition and assigning the whole random transition to the option jsfiddle.net/xAMVj/17 and things seems to work better now. But sometimes still the transition gets stuck as you can see on this screenshot dl.dropbox.com/u/153053/dhf%20tiles.png. It just stops there, and when going to the next slide it starts from a white blank, like you have moved forward before the previous transition has ended. – Integrant

@PauliØsterø Apparently there's a problem with switching the options in the 'before' handler. I can't find where exactly the issue lies. I've only found that all transitions work fine by themselves, only when you switch out the options, it starts behaving weirdly. So, a compromise between having a different transition every time and having always the same transition would be to have a random transition on page load, as proposed here: jsfiddle.net/xAMVj/18 – Indigence

@Indigence yeah, that's my conclusion as well... at least its narrowed down, i'll try to debug a bit on the before-handler and see if there is other ways to randomize each transition. Thnx so far. And great that you have been playing handball. Not the worst thing, to make the website for one of the best handball nations in the world :) – Integrant

@Indigence i solved the issue by extending your plugin a bit. Basically i made it possible to pass either 1 object or an array of objects as the 'tile' parameter. If its an array, the tiles-transition will use a random object from the array, otherwise behavior is as normal. – Integrant

I found small bug for jquery 1.3.2 in jquery.cycle.tiles.js on line 183 $tilesContainer.append($tiles); "Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3". My Solution: Change this line to $tiles = $tiles.clone(); $tilesContainer.append($tiles); – Kelliekellina

Wow, thanks for the report and for the fix! Seems straightforward enough, I'll patch it right in. – Indigence

Can you please update the link, it's broken...thanks – Blodgett