Customizing The Slideshow Script

The options that control the jQuery Cycle plugin which powers the slideshows are set in the slideshow.js file. You can copy this file into your theme to override the default script and customize the options of jQuery Cycle without hacking the plugin.

Adding a custom slideshow script

Copy slideshow.js from /meteor-slides/js/ to your theme’s directory to replace the plugin’s default slideshow script.

Using the slideshow script

Adding a custom slideshow script should only be a last resort for advanced customizations. Most of the options should be changed on the settings page or using metadata when possible.

Customizing the pageD navigation buttons

One reason you might want to use a custom script is to change the markup of the paged buttons below the slideshow. By default they are simply anchors, but to style them a certain way you might want to be able to target specific buttons by adding classes and numbering them.

Add these classes using the pagerAnchorBuilder option by adding this code:

pagerAnchorBuilder: function(idx, slide) {
	return '<a href="#" class="mbutton mbutton-' + ( idx + 1 ) + '">' + ( idx + 1 ) + '</a>';
}

That should go directly below the slideExpr option which will need a comma added after it:

slideExpr: '.mslide',

Then you can use a custom stylesheet to style each of the paged buttons differently.

For more ideas on how you could use this script, check out jQuery Cycle’s list of demos.