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:
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
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.
When it comes to JavaScript components that act on elements of the page, it is highly important to have those elements in place before the script tries to manipulate them, else things won’t work as intended. So, that begs the question, “What’s the best way to have JavaScript run on my page?” In this example we’ll focus on handling javascript while making slideshows with the jQuery Cycle plugin.
At any rate we want our pages to be seen by the visitor right away. We know if it takes more than a couple of seconds for anything to appear on the screen, the visitor is likely to click away to another site. Remember, text appears quickly when it’s not part of a table. The whole table has to be ready before you’ll see the table, so don’t use tables for design purposes, especially nested tables. Save your tables for presenting data.
A problem with big pages having slideshows is that if the page is not ready when a script tries to manipulate things, the effects may be all wrong. For example, when a script calculates the center position for an image it may get the positioning wrong, especially if all the images in the slideshow are not of the same size.
So, how do we improve our slideshow for the masses? We need to tell the javascript when to do its magic. In this example we’ll use this approach:
Perform initial actions with the .ready() method. Actions in this case are to hide images with the .hide() method until they are called for by the script.
Run the slideshow after the content has loaded with the .load() method.
Use a function to calculate the center for each image.
Apply the function with the before option in jQuery Cycle.
A previous post on centering slideshows with jQuery Cycle put all the javascript inside a .ready() statement. For many scripts this would be just fine, but for the slideshow it resulted in the action starting up before all the images were available.
For this example the slideshow is marked up as a group of images inside a <div> that has been assigned an id for JS targeting, #big_show, and a class for CSS targeting, .photos.
HTML Markup:
[plain]
[/plain]
Hide Images While Page Loads
Because it may take a while to load up all the photos for the slideshow, and everything else on the page, hide the photos except for the first one to start. Use a .ready() statement to hide the photos because we want to do that right away. Put everything in the .ready() method that you want to run first, even before the rest of the page or content has loaded. The .ready() function is a jQuery construct that allows you to bring functionality to the page before all the content has loaded. That way a page with lot of images can be useful even before all the images are visible.
For hiding images use the .ready() function so that this task will occur as soon as possible.
[crayon]
$(document).ready(function() {
$(‘#s1 img:gt(0)’).hide(); // hides all images with index greater than 0, so it shows the first image only – in one JS/jQuery call
$(‘#s2 img’).hide(); // hides all images
$(‘#s2 img:first’).show(); // shows the first image
$(‘#s3 img’).hide(); // hides all images
$(‘#s3 img:eq(0)’).show(); // shows the image with index equal to 0
});
[/crayon]
Many selectors could be used to target the first element in a series and the example above shows three ways of doing so for three different slideshows, #s1, #s2 and #s3. The outcome of each is the same in that only the first image is shown until the rest of the slideshow is loaded.
Control Slideshow Action After Window Loads
It makes sense to run a slideshow only when all the components for the show are present. To do that run Cycle with a .load() statement so that the slideshow waits to start until all of the images are loaded.
If you have a big slide show with lots of images, you might want to present an animated loading image until the slideshow starts.
Calculate Image Size for Centering in Slideshow
Take a look at the solution provided by “malsup” for users of his Cycle plugin:
[crayon]
function onBefore(curr,next,opts) {
var $slide = $(next);
var w = $slide.outerWidth();
var h = $slide.outerHeight();
$slide.css({
marginTop: (400 – h) / 2,
marginLeft: (300 – w) / 2
});
};
[/crayon]
Basically, what his code is doing is creating a function that will run before any slides are manipulated by Cycle. The purpose of the onBefore function is to calculate the correct margins for images and set the CSS parameters margin-top and margin-left for centering the images.
The onBefore function creates a variable called $slide to hold an array of the parameters of the $(next) element in the slideshow. The variables w and h are set to the width and height of said element via the $slide.outerWidth() and $slide.outerHeight() methods, respectively.
Finally, the margins are calculated from knowing the width and height of the slide container as set in the CSS (in this example 400 px and 300 px) and subtracting the slide’s width (w) and height (h) values, respectively. The margins only need to have half of the total margin value to accommodate both sides of the box, so the difference is divided by 2.
Use Cycle’s Before Option to Apply Centering Function
Using the onBefore function with Cycle’s before option works beautifully with images of different sizes, see line 5 of the .load() method above. Margins are set using the .css() method after they are calculated by the onBefore function.
You have to specify some CSS to get this thing to work right, namely set the width and height on the slide container and slides themselves.
Setting the max-width and max-height for the images helps to keep them inside of the container. Note that adding up the padding and border for both sides of the box is 10 px of the slideshow box that can’t be used to show an image. Therefore, the maximum image dimensions are the overall width or height minus 10 px. By accounting for the padding and border sizes a large image won’t overflow its container.
Any comments on this improved slideshow using Cycle plugin with jQuery?
The Cycle plugin for jQuery has many options that can be modified to create stunning slideshows. The look and feel of the slideshows are controlled with CSS and the behavior or animation of the slides is controlled by JavaScript. The Cycle plugin requires jQuery v1.3.2 or later.
Polaroid Photos
Sometimes you want to have a little fun with a project, like when somebody brings a Polaroid camera to a party. Taking Polaroid snapshots became wildly popular in the 1970s because it was the only camera that would produce a hand-held photo on the fly. All the other cameras had film that you would need to finish taking pictures on, and then send in to a photo developer to expose the negatives and print the photos. Polaroid cameras were like the iPhones of the 70s, and due to that popularity everybody knew what a Polaroid was — an instant photo.
Polaroid photos looked a little different from photo developer developed photos. They were always glossy and of a different format than the typical 3 1/2 inch tall x 4 7/8 inch wide snapshot that you’d get from the photo shop. With or without a border, the images on photo shop developed prints were rectangular, not square.
Polaroid cameras are still around today and their photos measure 3.5 inches wide by 4.25 inches tall. A white border around the image measures approximately 0.25 inch at the top, 0.1875 inch on the sides, and 0.875 inch at the bottom. The bottom border is larger so that you can write a caption there. Subtracting the size of the borders from the overall dimensions leaves 3.125 inches for the inner width and 3.125 inches for the inner height of the photographic image. Thus, Polaroid images are square instead of the standard rectangular format common in other photos.
Styling the Polaroid Photo
We can use CSS to make our images look like Polaroids. Introduce a dark, thin border and some padding for each image. In this case we’ll target the slides with the class .polaroid. Note that the container size may have to be enlarged to accommodate the padding and border from both sides of the image. This is especially important when all the images are not of the same dimensions.
The jQuery Cycle plugin is used to control the slideshow action. A function is called after each slide is shown on the screen to print the image alt text for the slideshow image captions.
We’re getting close with the above, but a little better slideshow effect would be to bring the whole polaroid through the effect, not just the inner square image.
This brings up one of the nice features of using jQuery Cycle for slideshows: any content can be used for the slides. That means a <div> containing an image and textual content — such as a caption — could be identified as slides.
Polaroid Slideshow
For this example each image and caption is wrapped in a <div>, and Cycle is called like so:
This slideshow hard codes captions in the HTML instead of displaying the image alt text dynamically. It just depends on the purpose of the slideshow and how many slides you have as to which approach you’ll use for captions.
Styling Double Mat Framed Prints
Give your slides the look of double matted, framed photos with a little CSS and a different special fx.
Here, the .frame class is set to “ridge” for the <div> and <img> border properties using slightly different colors to make a double matted picture frame look. Black and grey backgrounds and a small amount of padding serves as the mat boards for the illusion. The JavaScript Cycle fx parameter is set to “fade” for the slideshow.
![Previous](../images/previous.png")
