How to create a jQuery Slideshow in Drupal 7 (Screencast)

29 Jun
2011

Due to the overwhelming high numbers of hits on the original post of this, I recorded a screencast of the tutorial. So check it out. At the bottom are the links to the modules and libraries you’ll need. And for text instructions, go back to the original post.

Download this pre-built. Click for details.

Links for modules and libraries you’ll need:
http://drupal.org/project/views
http://drupal.org/project/views_slideshow
http://drupal.org/project/ctools
http://drupal.org/project/libraries
http://jquery.malsup.com/cycle/download.html

About bentedder

Ben Tedder is a front-end web developer. He loves WordPress, SharePoint, and Drupal, along with jQuery, CSS, and good 'ol HTML. +Ben Tedder on Google or follow @bentedder

Comments

I try to respond personally, but things get busy sometimes :)
  1. Neil says:
    Jul 17, 2011 at 1:02 am

    Thanks for this brilliant tutorial, it’s just what I’ve been looking for. Could you tell me if it’s possible to use a different image for the pagers instead of using a version of the main slide image?

    Kind regards

    Neil

    Reply
    • ben @ home says:
      Jul 17, 2011 at 6:13 am

      you could create a 3rd field in your content type (called pager image or something), so that every time you create a new “slideshow” piece of content, you could also upload another image as the pager image for that one.

      hope that helps!

      Reply
  2. Ben says:
    Aug 15, 2011 at 12:31 am

    Thanks for taking the time to create this. I’ll be using it on a project I’m currently working on. This was a great time saver.

    Reply
  3. Henry says:
    Nov 19, 2011 at 2:45 am

    What would be the best way to make multiple slideshows in this fashion? For example, I would like to have one with a set of images for the front, then a different slideshow with a different set of images in “gallery” page.

    Thank you.

    Reply
    • ben @ home says:
      Nov 19, 2011 at 7:07 am

      You could add another column to the slideshow content type called “gallery” or something. You could then (every time you upload a picture) declare which gallery it goes in. Then in views you could make multiple views and filter on specific galleries (the gallery column). That might work. Otherwise you could rework the whole setup and try to use CCK instead of views and make a slideshow of a single piece of content that had multiple images loaded into it. That’s just not covered in this tutorial though. Although I think I’ve done it before.

      Reply
  4. Kronda says:
    Jan 7, 2012 at 6:37 am

    I too found this very valuable, thank you very much. Also, your ‘original post’ link goes (or tries to go) to your edit page for the post, not the post itself.

    Reply
  5. Guillermo Quintana says:
    Jan 17, 2012 at 3:59 pm

    Really useful Tutorial. How can i embed the slideshow into a different or existing node such as the front page or a new custom node?

    Reply
    • bentedder says:
      Jan 17, 2012 at 4:30 pm

      Hi Guillermo,
      When you create the view, enable the option to also create a “block”. You can put this block into any piece of content. Just make sure you have php code enabled, and type the following (replace with your module name and block ID):

      
< ?php
  $block = module_invoke('module_name', 'block_view', 'block_delta');
  print render($block);
?>

      See this thread for a slightly more extended answer.

      Reply
      • Daniel Serna says:
        Jan 9, 2013 at 2:50 am

        Hi bentedder.

        Its a very useful tutorial, but in this case to display slideshow into frontpage you said “module_name” and “block_view”, the block view is the name of my block thats clear, but in the module name? can you explain me what module name I have to put?.

        Thanks

        Reply
  6. fabir says:
    Mar 6, 2012 at 6:14 pm

    great.thanks for sharing

    Reply
  7. mateo says:
    May 27, 2012 at 4:27 am

    Thank GOD finally after searching 2 days finally….THANK YOU saved on my favorite :)

    Reply
    • bentedder says:
      May 27, 2012 at 5:36 pm

      Great, glad you found what you needed!

      Reply
    • guido says:
      Jul 16, 2012 at 3:06 am

      Still some questions:

      1/ Which CSS to change to have the small images in line?
      2/ How to display this always at the bottom of all pages? Menu not needed.
      3/ How to manage that an extra tab is opened while clicking on big picture?

      Looking forward for yr kind feedback,

      Reply
      • bentedder says:
        Jul 17, 2012 at 9:02 pm

        Hi Guido,
        1) Change your theme’s stylesheet (in sites/all/themes/THEMENAME/THEMENAME.css
        2) You could create an attachment or block from this view, and call it in the footer of the page (see this article about embedding blocks in a page)
        3) In the View settings I believe there is an option to check a checkbox that says “open link in new window.” Otherwise, in the “target” field type “_blank”, which will open in a new window.

        Hope that helps!
        Ben

        Reply
        • Guido says:
          Jul 20, 2012 at 3:23 am

          1/ please you help more in detail?

          2/ Have made block from view with sucess

          3/ Do no find this option

          Please advice

          Reply

Trackbacks

  1. Create an easy jQuery Slideshow in Drupal 7 | bentedder.com says:
    Jun 29, 2011 at 7:21 pm

    [...] ##Update: I just finished the screencast here. [...]

    Reply

Join the discussion!