Forwardslash /


Custom Slideshow in WordPress

I Made a jQuery-driven Slideshow for GroundSpark's Website

In the past months, I’ve been working for a great organization called GroundSpark, which works through film and media to combat homophobia, bullying, and sexism, as well as other social justice issues. Most of the work I’ve been doing has been on their website, and today I finished piecing together a new slideshow for the homepage.

Some of the content came from a the prior, Flash-based slideshow which needed replacement, and some of it is new. The new slideshow is completely Flash-free (and iPad compatible, which is a big deal lately for website owners)—it’s all Javascript, HTML, and CSS. Most important, it’s integrated into their WordPress CMS, and can now be updated dynamically rather than re-generated from Adobe Flash.

The jQuery library along with the excellent jQuery Cycle plugin do the heavy lifting. The Cycle plugin is more often used with a set of images, but it will also work on an HTML content panel with whatever CSS-styled elements you want in it.

Two tips for using the plugin: the Cycle script has to be called after the page elements it acts on are rendered by the browser, so sticking it down by the bottom of the document helps with that.

Also, to prevent a flash of un-jQuery’d content (in this case a long list of content panes) wrap the slideshow in a container element of the same size with the overflow hidden with CSS.