Create Images Slideshow using Views Slideshow in Drupal 7

In this post I am going to explain how we can use Views Slideshow module to create an image gallery. Infact Views Slideshow can be used to create slideshow of any content (not just images) that can appear in a View. Powered by jQuery, it is heavi

ly customizable: you may choose slideshow settings for each View you create.

Potential Uses

:

  • News item slideshow (such as the title, image and teaser of the last 5 news articles submitted).
  • Rotate any image, based on any filters you can apply in views.
  • Hottest new products for any ecommerce drupal site.Rotate contact links, share links, etc.

The modules we need to install to create a image slideshow are :

  • Views
  • Views Slideshow
  • Chaos Tool Suite
  • Libraries

Rest of the modules we need are core modules of Drupal 7. CCK is now the core module in Drupal 7 along with image cache.

Lets begin first install a fresh copy of Drupal 7.3.
Download all the modules described above from the drupal.org.
Install and enable all the modules.

Now create a new Content Type by clicking on structure and then content types.

Click on add new content type.

Enter a name Slider and description of the new content type.

In publishing options uncheck the promoted to front page.

In comment settings close the comments and Click Save.

The new content type named Slider has been created.

Now click on the manage fields.

Add new field label and name it as Slider Image.

Add new field name enter field_slider_image.

Select image from the field dropdown.

Select the image widget in the widget dropdown and click save.

Then in the settings page keep the default settings and click save settings.

Add few content to the new content type that we have just created.

Now its time to play with views.

Click on structure and then Views.

Click on Add New View.

Enter name and description of the view.

I need this view to have a display page. So I will go with the default settings.

Stick with the default settings and click Continue & edit.

In the Filter Criteria choose the content type = Slider.

Under the Format heading click casino online content next to show and change this to fields. So that Show now contains the fields.

Now you can add fields to the views under the fields link.

Select the fields you want to display on the slideshow. I will choose the title and image field of the content type.

Go with the default settings. and click Apply.

Change pager to full pager and paged to 5 items. You can set any items according to your requirements.

Click on the Format and select slideshow and click Apply.

Now the settings window popups.

If you haven”t install the Cycle Plugin, you will see the message:

You need to install the jQuery cycle plugin. Create a directory in sites/all/libraries called jquery.cycle,
and then copy jquery.cycle.all.min.js into it. You can find the plugin at http://malsup.com/jquery/cycle.

Download the plugin from the link and save it in the sites/all/libraries/jquery.cycle with the name jquery.cycle.all.min.js
You will not find the minified version there so just download the full format and name it jquery.cycle.all.min.js. It will work.

Stick with the default options.

If you want the pager count at the bottom of the sliding images then check the pager option under the Bottom Widgets.

Also check Activate Slide and Pause on Pager Hover and then click Apply.

Now thats it now you can see your image slider in action by visiting the url which you given during the view creation.

Well I tried hard to let you understand all the steps in a very simple way. Still if you have any confusion or any doubts you can comment after the post. I will surely try to remove your doubts. If you have better suggestions they are always welcome. Cheers

Comments
  1. Ryan Johnson
    • Sam
      • Kaden
    • Wiznor
  2. Satchell
  3. Rhein
  4. Casque Dre
  5. Nancy Jeff
  6. john
  7. Web Optimisation
  8. Arrant
  9. Nick
  10. bed bugs
  11. Cornelia
  12. Cregan
  13. Iglesia
  14. Man With A Van
  15. dentist in las vegas
  16. tierhaftpflichtversicherung vergleichen
  17. Educzar
  18. Peter
  19. fear of turbulance
  20. Katharina
  21. Klonopin
    • Ghan
  22. Murray
  23. funny news
  24. Amie
  25. http://njcitizenscampaign.com

Leave a Reply

Your email address will not be published. Required fields are marked *


*