This post will explain how to create an easy jQuery Slideshow using Drupal 7 with a few modules.

##Update: Click here to see the screencast, or here to download the files.

What you’ll need to crete a jQuery slideshow in Drupal:

• Drupal 7
• Module – Views
• Module – Views Slideshow
• Module – Libraries
• Library – jQuery Cycle

What you’ll be able to create:

Note: This way of doing it means there is a piece of content for every slide. This is not one piece of content with an “unlimited” image field like a gallery. That is not covered in this tutorial. Maybe later. This allows for more control over your jQuery slideshow.

Step 1:

Create a new content type called “slideshow”. It should have 3 fields:

1. Title (default)
2. Link (text field, default settings, this is for where you are going to send people when they click on the image)
3. Slide (Image field, set number of values to “1″)

Step 2:

Add content. In the “link” field, put something like “http://www.bentedder.com“, just to test it. Add an image, and a title, and then repeat a couple of times so we have a few images to test. Try different URLs in the test images to make sure the linking is working.

Step 3:

Create 2 new image styles

1. slide – 470 x 250px
2. pager – 40 x 40px

Step 4:

Create a new view. Details should be as follows:
Show: Fields, default settings, no inline fields
Add Fields: (put in one at a time so the fields can be linked to each other)

• Link (from the slideshow content type), check the box to exclude this field from display.
• Slide (formatter: image, image style: slide, link image to nothing, select “output this field as a link” and put “[field_link]” in the link path)
• Slide (yes, again. formatter: image, image style: pager, link image to nothing, and exclude from display)

 

Step 5: (still in the same view)

Format: Slideshow (this is where you need the views slideshow module + jQuery cycle module/library), with the following settings:

• Bottom Widgets, check “pager”
• Pager Type: Fields
• Check the third box, “content: slide” (this should be third if you did it in order in step 4, it should be the excluded slide field that is formatted with the pager image.
• Check “Activate slide and pause on pager hover”

Step 6: CSS

This isn’t necessary, but otherwise your pager images will appear on top of each other. This floats them left next to each other.

.view-slideshow .views-slideshow-pager-field-item {
 width:40px;
 height:40px;
 margin-right:5px;
 margin-bottom:5px;
 float:left;
}

Step 7:

Make sure you set the correct filter criteria (content type = slideshow, published = yes). Sorting your results will affect in which order the slides appear. You cannot sort manually with this tutorial.

Step 8: include in a page to test

The sloppy way to do this, and for testing purposes, is to just include this view in a page. Make sure you have an text format setting that allows php input. Then put this in the body of the page, save and view.
Note: I’ve also built this jQuery slideshow package as a downloadable file that you can use and customize.

Hope it works for you, email or comment and I’ll help you out.

---

Download Files:

Drupal 7.12

+ Modules:

• ctools
• views
• libraries
• views slideshow

+ Libraries:

• jQuery Cycle

+ Customizations:

• Slideshow with pager – custom view (with block)
• “Slide” content type
• Page with embedded block code

• Installation Notes

 download now ($3) [.zip, 6.6MB]