Create Images Slideshow using Views Slideshow in Drupal 7

Posted by on in Drupal, Miscellaneous

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

You would also like:

About Sam

Web Developer by Profession, Human by Nature, Blogger by Passion. More than 5 years of experience in PHP, JQuery, Drupal, Cake PHP, HTML, CSS and Javascript. You can follow me on Twitter and also on Digg. Also you can email me at sam@codeinsects.com.

Comments

  1. By Ryan Johnson on

    Really appreciate this walkthrough and the step by step is really well written. I’ve really been starting to grasp Views got a handful of sliders under my belt but readingwell explained approaches to sliders just really helps grasp the vast possibilities of views and sliders, heck forms of presentation in general through drupal.

    Thank you for this post, I’m in your debt lol :)

    Reply
    1. By Sam on

      @Ryan : Thank you for reading our post. Yes with Views we can do lots of things, this was just a part. Will try to more post on Views. Cheers..

      Reply
  2. By Rhein on

    Thank you, I’ve recently been searching for info about this topic for a long time and yours is the greatest I’ve found out till now. However, what concerning the bottom line? Are you certain concerning the source?

    Reply
  3. By Casque Dre on

    Its in fact a nice and valuable piece of facts. I am satisfied that you simply shared this helpful information with us. Please stay us informed like this. Thanks for sharing.

    Reply
  4. By john on

    Thanks…I’ve been working on this for awhile and this is the easiest way for a beginner to learn views. I created a photo gallery after this which was possible because it finally all came together going step by step. thanks again!

    Reply
  5. By Web Optimisation on

    Normally I do not learn post on blogs, however I would like to say that this write-up very forced me to check out and do so! Your writing taste has been amazed me. Thanks, very nice post.

    Reply
  6. By Arrant on

    Simply desire to say your article is as amazing. The clearness in your post is simply great and i could think you’re knowledgeable on this subject. Fine along with your permission let me to take hold of your RSS feed to keep up to date with impending post. Thank you a million and please carry on the gratifying work.

    Reply
  7. By Nick on

    It’s the best time to make some plans for the long run and it’s time to be happy. I’ve read this submit and if I could I want to counsel you few fascinating things or suggestions. Perhaps you can write next articles relating to this article. I wish to learn more issues about it!

    Reply
  8. By bed bugs on

    Wow, superb blog layout! How lengthy have you been running a blog for? you make blogging glance easy. The whole look of your website is fantastic, as well as the content material!

    Reply
  9. By Cregan on

    Regards for sharing Create Images Slideshow using Views Slideshow in Drupal 7 | Code Insects with us keep update bro love your article about Create Images Slideshow using Views Slideshow in Drupal 7 | Code Insects .

    Reply
  10. By Iglesia on

    I really amount a outstanding posting you actually allocate in your reports. I’ll search for your web site and also have this audience study at this point frequently.

    Reply
  11. By Man With A Van on

    Hi there! Someone in my Facebook group shared this website with us so I came to look it over.
    I’m definitely enjoying the information. I’m book-marking and will be tweeting this to my followers! Wonderful blog and amazing style and design.

    Reply
  12. By dentist in las vegas on

    Awesome things here. I am very glad to see your article.
    Thank you so much and I am taking a look forward to contact you.
    Will you please drop me a mail?

    Reply
  13. By tierhaftpflichtversicherung vergleichen on

    Oh my goodness! Amazing article dude! Thanks,
    However I am going through troubles with your RSS.
    I don

    Reply
  14. By Peter on

    This is a great posting, but I have one problem. When I “Click on the Format and select slideshow” there is no slideshow option to select. All that is available is Grid, HTML List, Jump Menu, Table, Unformatted List and jPlayer. I must have missed something but I don’t know what. All help is appreciated.

    Reply
  15. By Katharina on

    I just like the helpful info you provide for your
    articles. I’ll bookmark your blog and check again right here frequently. I am quite sure I’ll learn
    a lot of new stuff proper here! Good luck for the following!

    Reply
  16. By Klonopin on

    Hі there, I desire to subscribe for this wеblog to obtain lаtest updatеs, so where
    can i dо it ρlease help out.

    Reply
  17. By Murray on

    Way cool! Some very valid points! I appreciate you writing
    this write-up and also the rest of the website is extremely good.

    Reply

Leave a Reply

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


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>