Tuesday, March 25, 2014

How to make jQuery Cycle2 plugin compatible with old Cycle plugin?

Malsup's Cycle2 plugin does not work with old Cycle plugin if both of them are used on the same page. It's because both these plugins use the same cycle() method name.

In order to make both of them work on the same page, one of the plugin's cycle() method must be renamed. I tried this with Cycle 2 version 2.1.2 minified production js file and it seems to work fine. If you are using non-minified file, I think the steps will be pretty similar. Follow the steps below.
  • Open up jquery.cycle2.min.js file and replace all "fn.cycle" with "fn.cycle2" and ".cycle(" with ".cycle2(". You don't need to change the class names, etc.
  • If you are initialising the slideshow by invoking the cycle() method in your view or anywhere else, you will need to change the function call too, such as "$('.myslideshow').cycle2()".
  • If you are using additional plugin files of Cycle2, perform find and replace as shown above on each of the files.
That should do it. Let me know if this works for you.