Xây dựng Drupal Slideshow với Views Slideshow.Module

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.

Step 1: Installation

• 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.

Step 2: Views

• Click Add.
• Select Image.
• Click Apply (All displays).
• Set the Image style to Large. We'll change this again later.

• 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.

• Find the Format area on the left-hand side of the Views page.
• Click Settings next to Slideshow.

• 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..

• 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.

• 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.