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;
}
Controls Top Determine if controls for the slideshow (start/stop/next/previous) should appear, and if so whether they should appear before or after the slideshow. and SO sli J:sh- Jk MR *-ii iv iujj- .uui iun~ t_ui in wis" Lup iitui iulk <div id-Views_slideshow_singleframe_controls_gallery- DLock_l class- Views_slideshow_singleframe_controls views_slideshow_controls" style-"display BLOCK block_l" views_slideshovi_previous" href-"# Previous block_l" views_slideshov»_pause" href-"# Pause <Za> block_l" views_slideshov»_next" href-"# V Next </c> </div> href href= DOS LUIZ AKA ID "views slideshow singleframe prev gallery- block CLASS " views Sl ideshow singlefrome previous VIEWS si ides how previous AKA id="views_ slideshow_ singleframe. playpause„ gallery- block III class "vietvs slideshow singleframe PAUSE VIEWS si ides how pause AKA id= VIEWS slideshow. singleframe. NEXT gallery- block III class " views slideshow singlefrome NEXT VIEWS ides how next" href BIG lp> s-11 vi avs_sl ingle romc_p rev us vi c*s_5 id us how_previ ou t.a bio ck.l11 las s-11 wi cws_sl ideshofl_si ngl ramc_pou sc clos vi ew_sl ideshow.si ngl romc_n cxt STYLE DISPLAY id=" vi ews_sli deshow_singl ef r ame_ controls„gal lery- class- "views si ideshow singLetrome controls vi ews_sl id eshow controls idU" view s_sl idesho*_si ngl ef rame_cont rol s_gal ry- bio ck_l s-11 viaws_sl ideshorrsi ngl ramecont rols uiews_l eshow_cont rol iglef slideshoiv idehoiv_ PL Ldc'iC.pr OF Icr clcchon TOO lr- I -i Jos dechon WING Icr LIES single dechon £tiq GAS sinjlcT 0,0 wic.prc jo jsnc. lock. viCi.s_s"L .dcfiho.Liii raric_playpflus jo vid.r.l.dcfiho" lock. JAR ni- BTR SQUAT IF .tnsilft ls,? WWI ilk:. 4i" t£t WILF FIG i >a 1 1 BOOB LO GRAMP IS«H|tll TO HR H'.-xl LT. Previous


Comments

Hi,

Thanks for the above, its exactly what i needed!
Just one question..
Where can i find the CSS &/or HTML location to edit..

Again many thanks

Nice work,

Thank you

Any idea how we could make the next and previous buttons hidden until someone mouses over the slideshow image? I know how to make the buttons hide until someone hovers over the buttons, but what about when hoving over the actual slide?

That could be done with CSS...

You could make the container the width of the slideshow image, and then use negative margins to pull the previous and next buttons out.

Then set a :hover attribute on the container element... so if the container was #container, and the previous link was .previous, you would do something like this:

#container .previous {
display: none;
margin-left: -50px;
}
#container:hover .previous {
display: block;
}

At least, that's how I'd do it...

Nice tutorial. Thanks for sharing your legwork.

Great tutorial, ¿How did you centered the image?

Verry nice tut, but i have one question about the buttons. When u give them a left and right of 0px the buttons will align to the sides of the screen. How do u get them next to te image?

wow................awesome!

Thanks for the wonderful tutorial. I am in real need to substitute the pager numbers by images. Would you please teach on that?

Thank you! This was exactly what I needed.

Hello,

Thanks for the above, its exactly what i needed!
Again many thanks

Just used this to great effect, and it worked like a charm. I noticed that I had to use position: absolute for overflow: hidden to work, even after setting height to 0. I guess float: left or similar would also have done the job. I mention this since it's not in the abridged snippet, just the full version.

Useful content. Thx Chris.

Thanks, saved me a lot of time!

:D sneaky! thanks a lot!

In which css do I make the changes..?

Really useful article Chris, thanks a lot.
Wes's comment is cool too - I added z-index: 100; to the individual controls and then made the controls div cover the whole slideshow image area (my images are 640x640px):
#views_slideshow_singleframe_controls_image_slideshow-block_1 {
position: absolute;
width: 640px;
height: 640px;
background: transparent;
z-index: 99;
}
so my controls could hover over the image (add opacity: 0.6; to soften them).

Great stuff, thanks, you saved my life :)
Have you got maybe also any idea how to hide the "previous" button on the first slide and the "next" on the last? I really can't figure it out.

Hey there,
thanks for the greate tutorial :)
I got a little problem while reproducing it.
Here is the page i am currently working at:

http://ff-aarbergen-hausen.de/ff-hausen/team-slider

As you can see, there a currently no buttons you could use. But when you login. The page looks like:

http://www.drupalcenter.de/files/teamseite_buttons.png

Any idea why my buttons disapear? :/

Greets
SG

Anotherway to do it is to go into /sites/all/modules/views_slideshow/theme

look for file called views-slideshow-controls-text-next.tpl.php

(there is also one for previous and pause)

and change the actual output of the view slideshow from a text to an image.

You will have to save a local copy of your file so that if you upgrade the module, you can re-apply your changes...

Great video! If you want to see another way to style the drupal views pager using CSS, check out https://issrweb.asu.edu/gis-and-web-blog/creating-drupal-7-slideshow-usi...