How to use images for next and previous buttons with Views Slideshow (or, how to replace any textual link with an image)

This tutorial is sponsored by the Save Joseph campaign, a grassroots effort to find a good friend, stellar artist and all around amazing person a satisfying, creative job in the next 9 days. I know the Drupal community could use this kind of talent. Learn more about the effort at savejoseph.org.

Views Slideshow is a nice module that leverages the jQuery Cycle plugin to create a highly-customizable, attractive slideshow. It comes with an option to display simple text controls to go forward or back through the slides. What I wanted was to customize this experience with images instead of the Previous and Next links.

The first step is create a view using Views Slideshow and enable the controls on the top of the slideshow. This is done via the Views style settings dialog:

Once this is set, you should see some links above the slideshow:

To turn these links into images, we first need to find a unique identifier for each one. Views Slideshow adds a unique ID, so we can use that. Here's what I see in Firebug when I inspect the element:

You can see there is a unique ID for each element. Now, all we need to do is set a number of styles for the link.

First, we need to set the background of the element to use our image:

background:url('images/left-button-on.png');

Next, we need to set the dimensions of the element to match our image, which is 71 pixels by 71 pixels. If we didn't have to worry about the text, we would just set the width and height. But, we need to hide the text, so we're going to set the height o 0, and the top padding to 71, which will bump the text out of view:

width:71px;
height:0px;
padding-top:71px;

If you refresh your page at this point, you'll still see some text:

This is because we need to explicitly set any the element to hide any content that's outside of it's bounds. We do so by defining the overflow property to hidden:

overflow:hidden;

Finally, I didn't want a pause button, so I set to not display:

display:none;

The final result looks like this:

By the way, the artwork you see is produced by Joseph Cowman, if you haven't seen his stuff, it's brilliant.

And the code, with some particular styles for what I needed, is this:

#views_slideshow_singleframe_prev_gallery-block_1, #views_slideshow_singleframe_next_gallery-block_1 {
  width:71px;
  height:0px;
  padding-top:71px;
  position:absolute;
  top:100px;
  overflow:hidden;
}
#views_slideshow_singleframe_prev_gallery-block_1 {
  background:url('images/left-button-on.png');
  left:0px;
}
#views_slideshow_singleframe_next_gallery-block_1 {
  background:url('images/right-button-on.png');
  right:0px;
}
#views_slideshow_singleframe_playpause_gallery-block_1 {
  display:none;
}