Home

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 available options

More Details

Options

• toLoad (Array) accepts an array of objects. you should have object per slide in your slideshow.
• 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.

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.