Creating a Drupal Slideshow with Views Slideshow

advert-full-class
advert-full-class

Views Slideshow is the most popular module for creating slideshows in Drupal.

Earlier this year we showed you how to use Views Slideshow to create a basic slideshow.

One of our students read that tutorial and wondered about taking things further. They wanted to create a slideshow with smaller thumbnails, similar to the one you see on WhiteHouse.gov, Grammy.com and many other Drupal sites. In this tutorial, we show you how to create a more advanced slideshow, similar to those famous sites.

media_1351621668227.png

Step 1: Installation

Install and enable these four modules:

You’re also going to need a single file that contains a JQuery slideshow script. This will need to be uploaded manually.

media_1351543536543.png
  • Download the file which will be called jquery.cycle.all.js
  • Access your site files.
  • Browse to the /sites/all/ folder.
  • Create a folder called /ibraries/ so that the path is /sites/all/libraries/
  • Create a folder called /jquery.cycle/ so that the path is /sites/all/libraries/jquery.cycle/
  • Upload the jquery.cycle.all.js file into that last folder.
media_1351543973645.png

Step 2: Views

We’re going to create our slideshow using Views.

  • Go to Structure > Views > Add new view.
  • Check Create a block
  • Choose Slideshow for the Display format
  • Choose 1 for the Items per page
media_1351542979941.png
  • Click Add.
  • Select Image.
  • Click Apply (All displays).
  • Set the Image style to Large. We’ll change this again later.
media_1351543165602.png
  • Click Apply (All displays).
  • Click Add.
  • Select Image.
  • Check the box which says Exclude from display.
  • Set the Image style to Thumbnail. We’ll also change this later.
  • Click Apply (All displays).
  • Click Content:Title
  • Click Remove

Once you’re finished, your fields area should look like the area below.

media_1351548620566.png
  • Find the Format area on the left-hand side of the Views page.
  • Click Settings next to Slideshow.
media_1351548657236.png
  • Scroll down to the cycle options.
  • Check the box Pager under Bottom Widgets.
  • Select the second of the two Image fields as the Pager fields..
media_1351549029523.png
  • Click Apply (All displays).
  • Click Apply (All displays). It should be close to looking like an active slideshow, but it will still have design problems. Your images won’t be the perfect size yet and your smaller images will be stached vertically.
media_1351549155895.png
  • In the center of your Views screen, set the Pager so that it contains the number of small iterms you want underneath your main image.
  • Click Save to record all your changes so far.
media_1351551001665.png

Step 3: Design

First, let’s set up the correct style for our images:

  • Go to Configuration > Image Styles.
  • Click Add style.
  • Enter slideshow_main
  • Click Create new style
  • Next to Select a new effect, choose Resize and click Add
  • Enter the height and width you’d like for your main slideshow image. Don’t worry about getting it exactly right first time. You can always come back and change this size.
  • Click Save

Now let’s create the style for our smaller thumbnails.

  • Repeat the process above.
  • This time create a style called slideshow_pager

Now, we’ll apply those styles to our View.

  • Go to Structure > Views.
  • Click edit next to your slideshow view.
  • Click on the first Image field and set Image style to slideshow_main
  • Click on the second Image field and set Image style to slideshow_pager

Now click Save and let’s go see your slideshow.

  • Go to Structure > Blocks.
  • Publish your view.

The final remaining problem is going to be the vertical images. We can fix that with CSS.

  • Go to your theme’s CSS file.
  • Add some code like this:
.views-slideshow-controls-bottom .views-slideshow-pager-field-item { float: left; margin: 5px 19px 0 0; }

As a final step, you will need to tweak your image styles and your CSS to match your design.

Here’s my end result, after this tutorial, and using dummy images:

media_1351549934591.png

Author

  • Steve Burge

    Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.

0 0 votes
Article Rating
Subscribe
Notify of
31 Comments
Oldest
Newest
Inline Feedbacks
View all comments
picturina
picturina
11 years ago

This looks helpful, but I your final result image shows that the pictures in the slideshow and thumbnails will be distorted. Most people want to maintain the original aspect-ratio of the images in their slideshow, since distortion give an unprofessional appearance. I wonder if you can address that.

Silverjerk
11 years ago

Changing images is fairly easy and is done via the inherent image styles menu within Drupal. It should be intuitive enough to add these styles to the pager/thumbnail elements to achieve the desired effect.

Chriswhite
Chriswhite
11 years ago

Hi,

How do we make slideshow like the one that appears at the top of the page?

Elfriede
Elfriede
11 years ago

Hi nice tutorial, but ehm.. how can I add the images? sry, not a drupal programmer 🙂

Rached Noureddine
Rached Noureddine
10 years ago
Reply to  Elfriede

well it depends on how you want to. that’s the Drupal way ( you chose how to).
you can add them while creating your content

the best way is to create an image field for your content type

Chriswhite
Chriswhite
11 years ago

Hi Steve,

Thank you for your reply, I managed to move the images using CSS.

I was wondering whether there is a way to make them all smaller when the window is re-sized?

I used:

max-width: 100%;

height: auto;

width: auto\9;

But didn’t work, is it because I used a view and the images/thumbnails are dynamically added?

Thanks once again!

Chris

Chriswhite
Chriswhite
11 years ago

@Elfriede

You need to have the images set up first, in my case I used the images I had for the products I created, I used the products option to bring up the list and then just selected the fields I required, i.e. images.

Hope this helps.

girlbert
girlbert
11 years ago

Thanks so much for this simple, but crazy-helpful tutorial!

Elfriede
Elfriede
11 years ago

Yes great guys!!! It worked!! Tnx so much.

criss
criss
11 years ago

hei. is it possible to make (with this module) a slideshow like this but having a pager that is also a slideshow which displays 2 pagers one time?

sosthy
sosthy
11 years ago

great tuto but plz how to overlay text on the slideshow

kuba
kuba
11 years ago

Thanks

ahmed
ahmed
11 years ago

hi there,

i want to change the images/thumbnai layout, how could i ?

thank you.

Alba
Alba
10 years ago

Thanks!

Michelle Jones
Michelle Jones
10 years ago

Hi. I’m having a problem with my drop-down menus going behind the slideshow. I need them to be on top of the slideshow so visitors can make selections. I can send a screenshot if needed.

steve
steve
10 years ago
Reply to  Michelle Jones

Hi Michelle. Sorry, our staff don’t give help in the comments, but they do in the members area: [url=http://www.ostraining.com/support-forum]http://www.ostraining.com/s…[/url]

Adams
Adams
10 years ago

Please how can i add navigation/ scroll to the thumbnail image

mwangisk
mwangisk
10 years ago

Thank you for this. It worked perfectly.

DarkteK
DarkteK
10 years ago

Thx so much man this was really useful =)

Nan Harbison
Nan Harbison
10 years ago

I got this working, except when you click on the pager, it takes you to the page the image is on, instead of just choosing that image in the sideshow. I changed the Link Image To field to file instead of content, and it takes you to the image in a new page. Is there a way to have the pager just choose that image?
Also, in step 2 when you say “click add”, it would help if you mentioned this was under the Fields area.

Thanks so much!

Bruce Cash
Bruce Cash
10 years ago
Reply to  Nan Harbison

Exact same problem. Did you get it figured out?

Jaap76
Jaap76
9 years ago
Reply to  Bruce Cash

‘Click Add’ is creating a new image field under fields. You need 1 image field for the slide (lets say: 960×300) and 1 image field for the pager (lets say: 120×120).
You should try to set the link under image field to “nothing” and start configure them at step “bottom widgets”. If you link the image to the content in the image field, it will guide you to the node where the image is posted.

Jaap76
Jaap76
9 years ago

This works fine, but I want to use the slideshow views for photo galleries of 10/15 photos each gallery. To keep the structure clean I like to group all photos of each gallery on 1 node, rather than 10/15 uploads. Which tweaks to I have to make to this tutorial?

Fred
Fred
9 years ago

Step 2, click add… WHERE???

Gary Pryde
Gary Pryde
8 years ago
Reply to  Fred

On the left. Look for the fields area and the add button upper right hand corner.

steve
steve
6 years ago
Reply to  Gary Pryde

Thanks for answering that Gary

sukirno
sukirno
8 years ago

dear Steve, i have a problem to put drop down menu going in the front of slideshows menu. I am a beginning learner of drupal. I tried to compare two webs and have made both same setting but the results are different. first web is [url=http://fe.uny.ac.id]fe.uny.ac.id[/url] and the second is [url=http://en.fe.uny.ac.id]en.fe.uny.ac.id[/url]. thank you very much for your kindness

Pankaj Sachdeva
Pankaj Sachdeva
6 years ago

Hi Steve,
I also want to create slider for thumbnails. Currently it is appearing as a simple row. When someone accessing it through Mobile, then thumbnail images went to multiple rows.
Can you please help me regarding this?

steve
steve
6 years ago

It’s probably a limitation of the module. I’d recommend you take our full course on using slideshows [url=http://www.ostraining.com/courses/class/drupal/slideshow]http://www.ostraining.com/c…[/url]
Thanks

31
0
Would love your thoughts, please comment.x
()
x