Wednesday, April 4, 2012

jQuery cycle not crossfading in WordPress

If your jQuery cycle is not cross fading or is choppy and you are using it in WordPress or the content section of your CMS then this post is for you...

The Problem

If you put your slideshow in the content of a page, you need to be aware that the standard WYSIWYG editor places tags in the code when presenting the page, but then hides then when you use the HTML view. 

As a result, what looks like this in the editor;



Is actually this when the pages is viewed;


This of course messes things up a bit in the in the jQuery Cycle Plugin’s presentation, and instead of a smooth crossfade from slide to slide,  the slides fade out to nothing, waits for a while, and then your next slide fades in.

The Fix

I’m sure you can tweak the WYSIWYG editor to fix this, but I found it easier to just remove all spaces between the elements in the slide show like this;


PS: jQuery cycle is my favourite slideshow tool, check it out here

2 comments:

  1. Thanks for this post. I've read loads of "jQuery Cycle choppy" posts trying to fix the problem, and your's is the first to address the WYSIWYG issue.

    ReplyDelete
    Replies
    1. Thanks For the positive feedback Steve.

      Delete