Thursday, April 19, 2012

Slideshow with multiple hyperlinks links per slide



Have you seen those websites with the cool slideshows that have items on each slide which link to other pages?

Well, one of my customers had seen this, and that’s what they wanted, only they wanted to have 3 different links on each slide.

There are a lot of WordPress plugins that provide this sort of feature, but not with the degree of control that I wanted.

The solution that I found was to use my favourite slideshow tool (jQuery cycle)  and add image maps to each slide.


This means that I can manage what parts of each slide are links and I can have as many links as I want per slide.

You can learn more about the map tag and image maps on this page : http://www.w3schools.com/tags/tag_map.asp

And you can get jQuery cycle from : http://jquery.malsup.com/cycle/


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