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 🙂

Share:
This entry was posted in Slide Shows and tagged . Bookmark the permalink.

3 Responses to WP-Cycle Slideshow Plugin Enhanced with Next and Previous Buttons

  1. This code executed perfectly!! Nice clean code and clear description of process. Thank you Iggy!

  2. Damara says:

    Hi, it seems that what you have done is amazing! the only thing is that I am not an expert when it comes to html and stuff and I would gladly appreciate if you could guide me on where to add the ” ” I mean what file? and then the css I guess is the style.css. Is that right?

    And one last questions the button used as prev and next is the same image right? I am sorry to ask you such dumb questions but I want to learn.

    Thank you very much!

    Damara

  3. Sunil says:

    I am not able to do it. Can you mail me the modified php file. Thank you.

Leave a Reply

Your email address will not be published. Required fields are marked *