Today I gonna show you how to install and setup the amazing views slideshow module on Drupal7.

This tutorial is now uptodate with latest modules!!!

Download all the modules from Drupal site and install in the directory yoursitename/sites/all/modules. Go to http://www.yoursitename.com/node#overlay=admin/modules and enable these modules as below;

(1) Views (2) Views UI (3) Views Slideshow (4) Views Slideshow: Cycle (5) Chaos tools (6) Link (7) Libraries (8) Token (Optional)

* Fullsize Slider image settings

Go to http://www.yoursitename.com/node#overlay=admin/config/media/image-styles and click on the add new style link (1) Give an Image style name and click on create new style button (2) On the next configuration screen select new style you want and then click add button (In this tutorial I choose resize style) (3) On the next screen set the width and height and click on the add effect button. (The settings may vary depend on the style you choose). I set width as 935 and height as 293 pixels.

Do this same process for the thumbnail image too. (for the thumbnail image dimension, I set width as 210 and height as 100 pixels.)

(1) Give a human-readable name, I named it as Featured Slider (machiine name will be auto generated based on the human readable name) (2) Give a brief and relevant description (3) Submission form settings, I leave as the default settings (4) Publishing options, I checked only published (all other settings unchecked) (5) Display settings, I have unchecked the authour and date info. (6) Comment settings,I set hidden (disabled) (7) Menu settings, I leave as default settings. (8) Click Save and add fields Button

 Image Field Settings

(1) Label: Slider Image (2) Field: slider_image (3) Field type: image (4) Widget (form element): image (5) Click Save button, and on the field settings page leave default settings and click on Save field settings button. (6) On the image field configuration settings page you can configure as you wish. I set this field as required, I added a file director name called slider-image so that this images will be arranged sperately from other images. You can set the maximum upload size and resolution here, I have anabled alt and title field and finally click Save settings button.

By using same method create the link field too.

Link Field Settings

(1) Click on add content link (2) Create Featured Slider content (3) Give a proper title name (4) Upload slider image (5) Give alt and title field names (6) Give a link title and url where you want the slider to be linked (7) Leave all othe settings as default except for the path field if yo want you can give an SEO friendly URL alias. (8) Save the content.

Same way create more Featured Slider contents (I have created four contents)

(1) Click add new view link (2) Give view name, I have named as Featured Slider (machiine name will be auto generated) (3) Give an apropriate view description (4) Choose Show Content of type Featured Slider (your content type name). (5) Uncheck Create a Pge and check Create a block (6) Type in Block title and choose display format as "Slideshow" of “fields” items per page 5 (you can enter the number of items you want to display) (7) Click the button “Continue & edit” Views Field Settings First let’s add link field (link must be the first field in order to work everything properly) so click on the add icon and from the filter Groups select Content Add Content: Link, Click “Add & configure button” in the next cofiguration window uncheck "Create a label”. “Check” Exclude from display. Click “Apply button”

Next let’s add image field, so click on the add icon and from the filter Groups select content Add Content: image field (Note: make sure you choose the image field which we crerated for this slider content type only.) Click “Add & configure button” in the next cofiguration window uncheck "Create a label”.

Formatter: Image (if you have installed Colorbox or lightbox you can choose them here!) Image Style: Fullsize (Choose the imagecache you have created in the above step) Link image to: Nothing Style Settings: Leave default settings No result behaviour: Leave default settings Rewrite Results: Check Output this field as a link Link path: [view_node] (Note:Scroll dow a bit and you can see replacement patterns created by Core Token module, (if we didn’t set the link field as first we can’t see link field option here) copy only [view_node] then scroll up and paste it in the link path field.) Click “Apply button”

Finally we need one more field for the thumbnail, so let’s click on the add icon and from the filter Groups select Content Add Content: image field (Note: make sure you choose the image field which we crerated for this slider content type only.) Click “Add & configure button” in the next cofiguration window uncheck "Create a label” and CHECK EXCLUDE FROM DISPLAY, Formatter: Image (if you have installed Colorbox or lightbox you can choose them here!) Image Style: Thumbnail (Choose the imagecache you have created in the above step) Link image to: Nothing Style Settings: Leave default settings No result behaviour: Leave default settings Rewrite Results: Check Output this field as a link Link path: [view_node] (Note:Scroll dow a bit and you can see replacement patterns created by Core Token module, (if we didn’t set the link field as first we can’t see link field option here) copy only [view_node] then scroll up and paste it in the link path field.) Click “Apply button”

Views Filters Settings

In views3 the filters are created in the beginning while we choose the content type and other settings! If you need any additional filetering you can create it here!

Views Style Settings

Click on the Format Slideshow | settigs and on the next configuratioin window set as below; (1) List type: Unordered list (2) Wrapper class: Leave default settings (3) Style> Skin: deafult (4) Slides> Slideshow type: cycle (5) Cycle options You need to download jQuery cycle plugin and copy jquery.cycle.all.min.js to sites/all/libraries/jquery.cycle You can find the plugin at http://malsup.com/jquery/cycle.

IN SIMPLE ENGLISH Create a folder named “libraries” in the site/all directory and then create an another folder named “jquery.cycle” in that directory and finally copy and paste only the “jquery.cycle.all.min.js” into this directory.

(6) Transittion: Fade (7) Action: pause on hover (8) Internet Explorer Tweaks: default (9) Widgets: You can choose either or both Top and Bottom (I choose bottom here, and the advance settings as below;) (10) Bottom Widgets>Pager>Pager type: Fields (11) Pager field: Content: Image (Note: last one we added for the thumb, don’t mistake since both field will be named same.) (12) Activate Slide and Pause on Pager Hove: checked, controls and slider counter leave unchecked. (13) Click Apply button.

Format Show Field Settings

You can even create custom front page template like page–front.tpl.php so that you do’t need to make any changes to the default page.tpl.php template.

Block Configuration Settings After enabling the block you get a link to configure the block so click on the Configure link and on the settings section set as below;

(1) Block title (if you don’t want blobk title to be displayed just type ) (2) Again you get all enabled theme specific Region settings. On visibility setings (3) Pages>Show block on specific page: choose Only the listed pages and type so that this block will be displayed only on the front page.

That’s all now we have successfully created our new Views Slideshow on Drupal7. I hope yo could understand the tutorial I tried my best to explain as much as I can, if you still have doubt’s comment below and I will try my best to help. The scren cast of this tutorial will be coming soon.

Play around and find the best you can in Drupal7, Best wishes.