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 width option which will need a comma added after it:

width:         $slidewidth,

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

Building custom paged navigation with slide titles

It is also possible to disable the pager links that jQuery Cycle automatically generates and tell Cycle to use your own markup instead. By doing this you can add your own content to the pager in the slideshow template, like slide thumbnails or titles.

Set the paged navigation markup using the pagerAnchorBuilder option by adding this code:

pagerAnchorBuilder: function(idx, slide) {
	return '.meteor-buttons a:eq(' + idx + ')';
}

Again, that should go directly below the width option which will need a comma added after it:

width:         $slidewidth,

That pagerAnchorBuilder function will tell jQuery Cycle to use any anchor tags in the meteor-buttons container as paged navigation. To create these links in the container, add a loop to it using a custom slideshow template. Replace this code, which appears twice in the template:

<div id="meteor-buttons<?php echo $slideshow; ?>" class="meteor-buttons"></div>

With this code, which has a loop that loads links with the slide titles:

<div id="meteor-buttons<?php echo $slideshow; ?>" class="meteor-buttons">
			
	<?php // Loop which loads the pager nav with slideshow titles
			
	while ( $meteor_loop->have_posts() ) : $meteor_loop->the_post(); ?>
			
		<a class="meteor-title meteor-title-<?php echo $meteor_count; ?>" href="#"><?php the_title(); ?></a>
					
	<?php $meteor_count++; ?>
				
	<?php endwhile; ?>
				
	<?php // Reset the slideshow loop
		
	$meteor_count = 1;
		
	wp_reset_postdata(); ?>
			
</div><!-- .meteor-buttons -->

Then using a custom stylesheet the title buttons could be styled like this:

/* =Paged Navigation
-------------------------------------------------------------- */

.meteor-slides .meteor-buttons {
    bottom: -34px;
    height: 20px;
    left: 0;
    margin: 0;
    padding: 0;
    position: absolute;
    width: 100%;
    z-index: 999;
}

.meteor-buttons a {
	background: #ededed;
	color: #000;
	font-size: 10px;
	line-height: 10px;
	margin: 0 3px 0 0;
	outline: none;
	padding: 5px;
	text-decoration: none;
	text-transform: uppercase;
}

.meteor-buttons a:hover,
.meteor-buttons a.activeSlide {
	background: #d6d6d6;
	color: #000;
	text-decoration: none;
}

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