WP-Cycle Slideshow Plugin Enhanced with Next and Previous Buttons

For HTML sites I often use JQuery Cycle Plugin, which allows many options for slideshow display. Now for WordPress I found this plugin to easy implement this on wp site. It’s called WP-Cycle Plugin.

WP-Cycle allows to install a simple slideshow by including in a theme file. But it also allows to edit transition effects, timing and images used all from an easy plugin interface. Also allows to put links on slideshow images. Very easy.

The only problem I had was to implement Next and Previous buttons on slideshow. That’s why I replaced default javascript part, which calls the slideshow on a page, with my code in the plugin file (near the bottom of script text, you may open it with Edit link below the plugin’s name):

<script type="text/javascript">
jQuery(document).ready(function($) {
	$('#<?php echo $wp_cycle_settings['div']; ?>')
	.before('<div id="shNav">')
	.cycle({
		fx:     '<?php echo $wp_cycle_settings['effect']; ?>',
		pager:  '#shNav',
		pagerAnchorBuilder: function(idx, slide) {
            // return sel string for existing anchor
            return '#shNav li:eq(' + (idx) + ') a';
        },
		timeout: <?php echo ($wp_cycle_settings['delay'] * 1000); ?>,
		speed: <?php echo ($wp_cycle_settings['duration'] * 1000); ?>,
		next:   '#shNext',
		prev:   '#shPrev'
	});
	$('#direct').click(function() {
        $('#shNav li:eq(2) a').triggerHandler('click');
        return false;
    });
});
</script>

But the plugin doesn’t have this Next / Prev links in its HTML code. So I’m adding after the slideshow my slideshow navigation buttons:

<div id="hpBan">
	<?php wp_cycle(); ?>
	<div id="shPNNav">
          <a id="shPrev" href="#">Prev</a>
          <a id="shNext" href="#">Next</a>
        </div>
</div>

Now I just positioning my buttons on top of slideshow playing with css, such as:

#slideshow {
	z-index:1;
}

#shPNNav {
	height: 38px;
	position: absolute;
	top: 113px;
	width: 571px;
	z-index: 2;
}

#shPNNav a {
	width:40px;
	height:39px;
	float:left;
	text-indent:-2000em;
	background:url(i/bg_sh.png) no-repeat 0 0;
	overflow:hidden;
	margin:0 6px
}

#shPNNav a#shNext {
	float:right;
	background-position:100% 0
}

Buttons are made with png image background, z-indexes insure my slideshow plays even below drop-down menus, etc.

The only thing I must remember: not to update this plugin automatically in wordpress. But I put a notice in plugin’s file credentials 🙂