6

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!

Alex
  • 66,732
  • 177
  • 439
  • 641
hybrid
  • 3,868
  • 2
  • 26
  • 28
  • 1
    Hi. I'm interested in this too ...really like Nivo slider effects :D – Alex Feb 24 '11 at 12:46
  • 1
    coin slider is really cool too: http://workshop.rs/projects/coin-slider/ – Alex Feb 24 '11 at 13:20
  • I think, it is really easy. The thing is you need to play with divs and their background-image. Just see the html-code (http://nivo.dev7studios.com/). If you want I can create a simple example later. – Igor Feb 24 '11 at 13:29
  • Update: I have generalized the strips to tiles and put many more examples on the [demo page](http://jayis.net/thomas/cycle/). – Thomas Feb 27 '11 at 12:05

1 Answers1

9

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.

Thomas
  • 2,162
  • 1
  • 13
  • 10
  • 1
    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.. – Alex Feb 24 '11 at 18:26
  • @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 – Thomas Feb 24 '11 at 18:53
  • @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. – Thomas Feb 24 '11 at 19:21
  • 1
    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! – hybrid Feb 25 '11 at 04:25
  • do you guys know how can you break the slide into horizontal strips as well, like coin slider does? – Alex Feb 25 '11 at 07:40
  • @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. – Thomas Feb 25 '11 at 11:52
  • 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. – Thomas Feb 25 '11 at 15:39
  • beautiful :D you should contact the cycle plugin author and tell him to include them in his plugin :D – Alex Feb 25 '11 at 17:48
  • 1
    @Alexandra: Update: I have generalized the strips to tiles and put many more examples on the [demo page](http://jayis.net/thomas/cycle/). – Thomas Feb 27 '11 at 12:06
  • 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? – Alex Feb 28 '11 at 10:42
  • @Alexandra: I'm not sure I understand. I've included code samples for each of the [example galleries](http://jayis.net/thomas/cycle/#example-tiles-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. – Thomas Feb 28 '11 at 11:16
  • 1
    there's a small "bug". if you click next/prev before the animation finishes the current slide turns white – Alex Feb 28 '11 at 11:50
  • @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. – Thomas Feb 28 '11 at 12:10
  • 1
    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 – Alex Feb 28 '11 at 14:10
  • @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! – Thomas Feb 28 '11 at 14:21
  • @Thomas 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. – Pauli Østerø Mar 14 '12 at 11:51
  • @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. – Thomas Mar 15 '12 at 08:53
  • @Thomas 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 http://www.dhf.dk/?tiles=on, while the normal fade-transitions are here http://www.dhf.dk – Pauli Østerø Mar 15 '12 at 12:16
  • @Thomas i also created a JSFiddle here where you can see how the Cycle plugin is configured. http://jsfiddle.net/9yRg6/2/ – Pauli Østerø Mar 15 '12 at 13:29
  • @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. – Thomas Mar 15 '12 at 16:35
  • @PauliØsterø I've forked your jsfiddle into a fixed version that meets your requirements: http://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. – Thomas Mar 17 '12 at 12:23
  • P.S.: I used to play handball as a kid, more than 20 years ago. :) In Flensburg. – Thomas Mar 17 '12 at 12:41
  • @Thomas 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. – Pauli Østerø Mar 17 '12 at 12:44
  • @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: http://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. – Thomas Mar 17 '12 at 13:04
  • @Thomas 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 http://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 http://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. – Pauli Østerø Mar 17 '12 at 13:32
  • @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: http://jsfiddle.net/xAMVj/18/ – Thomas Mar 17 '12 at 15:44
  • @Thomas 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 :) – Pauli Østerø Mar 17 '12 at 18:01
  • @Thomas 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. – Pauli Østerø Mar 19 '12 at 10:39
  • 1
    I found small bug for jquery 1.3.2 in [jquery.cycle.tiles.js](http://jayis.net/thomas/cycle/js/jquery.cycle.tiles.js) on line 183 `$tilesContainer.append($tiles);` "Uncaught Error: HIERARCHY_REQUEST_ERR: DOM Exception 3". [My Solution](http://jsfiddle.net/kubedan/pHUXB/3/): Change this line to `$tiles = $tiles.clone(); $tilesContainer.append($tiles);` – kubedan Jun 20 '12 at 13:01
  • Wow, thanks for the report _and_ for the fix! Seems straightforward enough, I'll patch it right in. – Thomas Jun 21 '12 at 14:18
  • Can you please update the link, it's broken...thanks – Code Lover Aug 24 '15 at 04:44