Home

Live Demos

• Images with title and caption
• Images only
• JSON data

Step 1

Include jQuery, jquery.cycle, and jquery.qCycle. They are all required. In that order.

Step 2

Define your array of images.

The path to your image must be a property called img. Exactly.

Step 3

Set up the first slide in your HTML source.

Step 4

Call the plugin.

toLoad is a reference to the array we created in Step 2.

cycleOpts gets passed, untouched, into jquery.cycle when it gets initialized.

createSlide is a custom function that gets run every time a slide is created (read this every time an image gets loaded). Do whatever jquery magic you need to do here. Generally, you’ll just be mimicking the HTML structure of your first slide (Step 3). All options listed below.

More Details

Options

• toLoad (Array or String) accepts an array of objects. you should have object per slide in your slideshow. Array can contain object literals with arbitrary data (including an image path) or simply string image paths. you can also pass in a URL that will return a JSON array.
• cycleOpts (Object) passed directly into jQuery.cycle on initialization. see cycle docs for options.
• createSlide (Function) where slides are created. default just returns the loaded image.
• onPageLoad (Boolean) if false, plugin starts immediately. defaults to true, waits for window.load.
• imageKey (String) name of the image path property in your data. defaults to img.

Defaults can be overridden by declaring your own object literal in $.fn.qCycle.defaults.

CSS

Apply any CSS you’d like to use. qCycle does not require any specific CSS to operate.

Gotchas

In Step 2, the path to your image must be a property called img. It cannot be image or imagePath or anything else. It must be img.