Demo

gpEasy Cycle Slideshow Lite Plugin

Update: some users have had problems with this plugin in gpEasy 2.x. It seems that in some themes the gadget needs to be added as a section just before the section that contains the images. I've updated the plugin for gpEasy 2.2 and applied the combine JS & CSS so they will be combined in the head. Nonetheless, the easiest way to use this plugin is to add it as a section to the page you are using it on.

 

This is a very simple plugin based on the jQuery Cycle Lite Plugin. By adding the gadget (Cycle_ss) to a layout you can create a simple slideshow that transitions content continuously with a fade effect. Take a look at the jQuery Cycle Lite Plugin page to see a demo. This plugin uses the default demo style.

Just add class=""cycle_ss" to a div that wraps the content you want displayed and style it appropriately in your theme or in-line.

Here's some example code with in-line styling to make it look just like the demo on the Cycle Lite Plugin page.

<div class="cycle_ss" style="height: 232px; width: 232px; margin: auto;">
	<img height="200" src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" style="padding: 15px; border: 1px solid #ccc; background-color: #eee;" width="200" />
	<img height="200" src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" style="padding: 15px; border: 1px solid #ccc; background-color: #eee;" width="200" />
	<img height="200" src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" style="padding: 15px; border: 1px solid #ccc; background-color: #eee;" width="200" />
	<img height="200" src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" style="padding: 15px; border: 1px solid #ccc; background-color: #eee;" width="200" />
</div>

 

Documentation

Minimum requirements: gpEasy CMS 1.7

To create a slide show just create a div with the class cycle_ss.

Example:
<div class="cycle_ss">
<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
<img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
</div>

Styling Your Slideshow

The Cycle Slideshow Lite plugin uses the class cycle_ss. You must use that class to style your slideshow. I have left out styling because I think most of you will want to customize your slideshows. Here is an example style, just add it to your theme style.css file.

.cycle_ss { height: 232px; width: 232px; margin: auto }
.cycle_ss img { padding: 15px; border: 1px solid #ccc; background-color: #eee; }

You can also style your slideshow with inline styles. This allows you the greatest flexibility in creating your slideshows on a per page basis.

Slideshow content does not need to be all the same size. Just make sure that your div surrounding the content is sized to hold the largest item.

Smooth Loading

For the smoothest loading of your slideshow, place the gadget as early on the layout as possible. Before the header is a good place. Just make sure the gadget loads before the slideshow content. This will reduce the possibility of all the slideshow content being displayed for a split second while the gadget loads.

Slideshow Content

Your slideshow can contain any type of content. Please read the jQuery Cycle Lite Plugin documentation for more information, see below for link.

Credits

This gpEasy plugin is based on the jQuery Cycle Lite Plugin. Please read the plugin page for documentation concerning the jQuery Cycle Lite Plugin.

 

Download

 

gpEasy B2sq Theme by CS @True Acupuncture