jQuery – computeraxe

Pause and Play Buttons for jQuery Slideshow

Continuing our slideshow journey with jQuery Cycle plugin, we’d like to improve our slider by adding two more buttons. Last time we looked at creating a slideshow with previous and next buttons, but now we’d like to add buttons for pause and resume. It would be nice to allow site visitors to stop a slideshow with a pause button and resume the slideshow with a play button whenever they’re ready to continue.

If we keep the overall design the same, we just need to do two things to modify the slider. First, we need to upload the images for the pause and resume buttons and add a couple of lines to the HTML markup for positioning the buttons. We’ll fit the pause and play buttons in between the previous and next buttons. Each button will use an anchor tag, an id for CSS and script targeting, and a title for a user-friendly tooltip.

HTML Markup for Slideshow Controls:

[plain]

[/plain]

Second, we need to add a couple of lines to the script to manage the action when someone clicks either button. Here, we’re assigning Cycle’s pause or resume option to the click function of the selected id, in this case #slide_aft. Adding a ‘return false’ line assures that the site visitor won’t be taken to another page when the buttons are clicked.

jQuery script portion for pause and resume buttons:

[crayon]

$(‘#pauseButton’).click(function() {
$(‘#slide_aft’).cycle(‘pause’);
return false;
});
$(‘#resumeButton’).click(function() {
$(‘#slide_aft’).cycle(‘resume’);
return false;
});

[/crayon]

The above script portion was placed in the document.ready function($) so that the buttons are able to be used as soon as practical.

Here’s the full slideshow example with button controls for pause, resume or play, previous slide, and next slide.

Now, that looks a little better. This slideshow looks more complete having the pause and play or resume buttons, as well as the prev and next buttons.

Previous and Next Buttons in a jQuery Cycle Slideshow

A site visitor to computeraxe wanted to know how to incorporate previous and next buttons in their slideshow using jQuery Cycle plugin. It’s easy! Let’s see an example, ok?

If you haven’t checked out the simplicity of the jQuery Cycle plugin, you should because there’s a whole lot you can do with it. It’s a very versatile plugin and quite popular, which speaks to its usefulness — and cool factor, too. Previous posts here covered the basics about the Cycle Plugin, how to make slides look like Polaroids, using image captions with Cycle, and discussions about a transition effects problem with certain fx.

Let’s get into the example for making previous and next buttons for a slider in jQuery using the Cycle plugin.

Before writing any code it would be a good idea to sketch out the design for the slideshow. The photos or slides will be held in a container div that can be targeted for CSS styling and javascript. Captions and their container paragraph would also be placed inside the container div. In this example we’ll do away with the captions for simplicity and place the previous and next buttons inside the container div.

It turns out that Cycle has two options for creating the functionality for going to the next photo or the previous slide in a sequence. These options are appropriately named ‘next’ and ‘prev’. The values to give for each are the locations of the next and previous buttons. To specify each location, create an id.

Here, we’re using #next2 for the next button and #prev2 for the previous button. Since we’re having only one next/previous button set for this slideshow, an id for each makes sense. If you have more than one slider on a page, a class would be more appropriate. When somebody wants to see the previous slide they’ll click on the ‘previous button’, so the best HTML tag for the slideshow controls is an anchor with a href of ‘#’. We don’t want to leave the page when clicking the previous button, we just want to see the previous slide in the show.

HTML Markup:

[plain]

Slideshow example using jQuery Cycle plugin with previous and next buttons.

[/plain]

We’ll use a couple of small images to accommodate the previous and next slide functionality. One could use the words ‘prev’ and ‘next’ instead of images, if desired. In case a site visitor needs help, we’ve included a tooltip for each button by the way of a title for each anchor.

We want to hide all the images except the first image whenever the document is ready. Else, we’ll use the window load function for the slider action.

jQuery:

[crayon]

// jQuery Cycle options for slideshow with next/previous buttons

$(window).load(function() {
$(‘#slide_afta’).cycle({
fx: ‘fadeZoom’,
timeout: 2000,
next: ‘#next2’,
prev: ‘#prev2’,
slideExpr: ‘img’
});
});

// hide all but the first image when document is ready

jQuery(document).ready(function($) {
$(‘#slide_afta img:gt(0)’).hide();
});

[/crayon]

Of course, there are many different ways to style your slideshow. Here’s our example Cycle slider with next and previous buttons.

Slideshow example using jQuery Cycle plugin with previous and next buttons.

What if you want two sliders on the same page?

The first thing to recognize is that more than one id with the same name won’t work on the same page, so parts of the document for the second slider with an id will have to be changed over to a class or a different id name. CSS will have to be updated to reflect the changes, as will the javascript.

However, using the same class names for the next and previous controls for two sliders on the same page will result in both sliders being controlled by the same set of control buttons. That’s probably not what you’d want, nor what your site visitors would expect. Rename the action buttons (prev, next) and the container for the slides to different class names in order to be able to control the second slideshow. Of course, a second Cycle script would be needed to target the new container for the second slideshow.

Loading WordPress with One jQuery

If there are several plugins on your WordPress sites there may be more than one copy of jQuery, or other script, that’s loaded, especially if you’re relying on the same scripts for control of the site theme as well. Only one copy of each script should be loading up. More than that represents wasted bandwidth for you and wasted time for your site visitors.

To control what scripts are used on your site it may be wise to learn how to disable scripts from loading in the first place. Similar methods can be applied to streamline the number of scripts or stylesheets loaded onto your site.

Check out this great tutorial on disabling scripts and styles. Thanks for sharing, Justin!

You’ll need to modify the functions.php file of your theme to remove styles or scripts. The technique is similar in each case.

Find the ‘handle’ of the script that you’d like to remove.
Pass the script handle to wp_deregister_script().
Wrap one or more ‘deregistrations’ in a new function, like my_deregister_javascript() in this example.
Use add_action() with wp_print_scripts method and add your new function to the functions.php file of your theme.

[plain]
function my_deregister_javascript() {
wp_deregister_script(‘jquery-form’);
}
add_action(‘wp_print_scripts’, ‘my_deregister_javascript’);
[/plain]

From the reference on add_action in the WordPress codex we can see that two arguments are required, namely the $tag or handle of the script and the $function_to_add or the function to which the script is hooked. Two optional parameters can be added to the add_action function to specify the $priority or the order in which the functions are executed, and $accepted_args or the number of arguments that the function accepts. Generically,

[plain]
add_action( $tag, $function_to_add, $priority, $accepted_args );
[/plain]

In the example above we’ve used ‘wp_print_scripts’ for $tag and ‘my_deregister_javascript’ for $function_to_add while the optional $priority and $accepted_args were not used. This will hook the new function ‘my_deregister_javascript’ to the action called ‘wp_print_scripts’.

Alternatively, a WordPress plugin could be used to manage the scripts and actions called for on your site. Use Google Libraries is a plugin built to detect the scripts needed for a site to run properly, including all the scripts called for by plugins and the active theme. Scripts are loaded in the proper order taking into account dependencies, whether previously known to WordPress or whether provided by the plugin and theme authors. This plugin uses the content delivery network (CDN) of google to supply the most popular javascript libraries, including jQuery and jQuery UI, among others.

WordPress jQuery Loaded in noConflict Mode

Loading JavaScripts in WordPress queues up the internal, minified versions of scripts like jQuery that come with WordPress. jQuery is loaded in noConflict mode so javascript code won’t work if it uses the “$” shortcut like so:

[plain]
$(document).ready(function(){
$(.slideshow1).cycle();
});
[/plain]

A simple solution is to pass the dollar sign in the anonymous function of a ready() call and that way the code that you’ve already written with the $ shortcut will work ok. The dollar sign acts as an alias for jquery.

[plain]
jQuery(document).ready(function($){
.
.
//javascript code in here can use the $() shortcut instead of jQuery()
.
.
});
[/plain]

Alternatively, instead of waiting for the entire document to be rendered as with the ready() method above, the javascript can be put in the following jQuery wrapper so that the code can be used right away.

[plain]
(function($) {
$(‘#newsticker’).innerfade({
animationtype: ‘slide’,
speed: 750,
timeout: 2000,
containerheight: ’30px’
});
})(jQuery);
[/plain]

Using one of these jQuery wrappers is recommended to avoid conflicts with other scripts that may rely on the dollar sign shortcut on your WordPress sites.