Creating a Carousel on Drupal Gardens

Rob Loach's picture

Submitted by Rob Loach on July 21, 2011 - 11:37am

At Acquia, we created a Drupal Showcase site to display some of the most beautiful Drupal websites around. We wanted to highlight some of the more popular sites in a featured carousel when people visit the site. Since we wanted the site to be on Drupal Gardens, however, we couldn't install the jCarousel module, so we had to come up with our own way to have a Carousel on the site.

1. Download jCarousel Lite

We used jCarousel Lite to accomplish our carousel widget. There are many other Carousel jQuery plugins around, so feel free to explore them, but we just used jCarousel Lite as it's small and easy to use. What you'll need to do is enable the JavaScript Libraries module on your site, download jCarousel Lite, and upload the .js file as a JavaScript Library at admin/config/system/javascript-libraries. Now that we have the jCarousel Lite JavaScript files available, we can move on to creating the View to render the carousel.

2. Create the content

In order to display a carousel, we'll first need some content to display. This content should probably have an image field associated with it so that users can scroll through the images in the carousel. Our content type is called "Showcase Submission", but you can call yours whatever you want. Once you have your content type, make sure there's an image field available for it and remember what the image field name is.

3. Create a View

Views is one of the most powerful things in the Drupal world. It allows you to make complex lists of content, display them in any way you want to, and do it all in a nice user interface. We'll create a View for our Carousel so we can display it as a block on the site. Add a new View by clicking Structure, Views and then "Add new view" (admin/structure/views/add). I'll name mine "My First Carousel", but you can call yours whatever you want. You'll want to "Create a block", which uses an HTML list of fields. 10 carousel items seems like a good amount, but you can have as many as you want.

4. Configure the View

The View we are creating will display a list of images, and we'll have jCarousel Lite come along and carousel-ize the list. We now have to set up our View so that it displays this list of images. For the Fields on this View, remove the Content: Title and add your image field. Make sure to link the image to the content so that the user can click on the images when they are displayed in the carousel. Don't have a label for it. In the Header section, we'll have our previous arrow to push the carousel left. So, for the Header, add a Global: Text area with the following Raw HTML:
<img src="http://www.gmarwaha.com/image/imageNavLeft.gif" class="carouselprev">
In the Footer section, we'll have our forward arrow to push the carousel right. So, for the Footer, add a Global: Text area, add a Global: Text area with the following Raw HTML:
<img src="http://www.gmarwaha.com/image/imageNavRight.gif" class="carouselnext">
You'll probably want to host those images on your site using the Media interface, or even use your own images. The important part is that you remember "carouselprev" and "carouselnext" classes. We don't want a Pager in our carousel, so just have it "Display a specified number of items".

5. Place the Carousel

Now that we have our View configured as a Block, we must put it on the site somewhere. Visit the Blocks administration at admin/structure/block and look for "View: My First Carousel". Drag the block up into the region you would like it to appear, maybe in the Precontent bottom region for example. Save the configuration and visit your homepage. Uhh, that's not right at all. What we need is some CSS to spice it up.

6. Carousel the Carousel

What we need to do now is to apply our jCarousel Lite JavaScript to the block so that it Carousel-izes it. Hover over the gear of the block and click Edit view to bring you back to the Views administration. We’ll need some JavaScript to apply the carousel to our content. Add a new Footer Global: Text Raw html, as it’s time to get into some code...
<script type='text/javascript'>
jQuery(document).ready(function() {
  jQuery('#block-views-my-first-carousel-block .item-list').jCarouselLite({
    btnNext: '.carouselnext',
    btnPrev: '.carouselprev'
  });
});
</script>
The ID of “#block-views-my-first-carousel-block” is probably different in your situation if you named your View different than “My First Carousel”.

7. Prettify the Carousel

Once saved, visit the homepage again to test out our new Carousel. Edit the View again, and add a new Global: Text area Raw html with the following code:
<style type='text/css'>
.view-my-first-carousel .view-header, .view-my-first-carousel .view-content, .view-my-first-carousel .view-footer {
  float: left;
}
.view-my-first-carousel .view-footer, .view-my-first-carousel .view-header {
  cursor: pointer;
}
</style>
Again, ".view-my-first-carousel" will change if you named the View differently from "My First Carousel", but if you get everything right, you'll end up with a Carousel!

8. Make it your own!

As you can see, this carousel actually isn't as pretty as it could be. Kevin O'Leary helped with our design, but this is your chance to customize yours as much as you want. Tap into those CSS skills of yours, change the previous/next buttons, modify the width of the carousel to match your site's design, stick borders around the images, be creative! A featured carousel will be the first thing people see on your site, so make it pretty, make it personal, and have fun! September 24th, 2011 Update: Fixed to use the JavaScript Libraries module to upload the Carousel .js file.

Comments

jlocke July 21, 2011 - 12:03pm

Thanks for recipe.  The Drupal Showcase site looks great.  What theme did you start with, was it Campaign? I noticed the rounded corners. Any chance that theme could be made available?

EGAFutura July 21, 2011 - 2:57pm

Awesome!

www.EGAFutura.com < Drupal Gardens is Awesome!

Rob Loach July 22, 2011 - 8:03am

I believe we started with Broadway, and then heavily modified it from there? We added a lot of CSS, and Kevin O'Leary, one of the Acquia designers, made lots of changes in the Theme Builder. Although the majority of the theme is very specific to the Showcase, we'll have a look at making the theme available in the future. The rounded corners you see are just done with CSS. It's pretty remarkable what you can accomplish by just using CSS!  If you search for rounded corners in the forums, you can see some examples of how to do it like http://www.drupalgardens.com/content/rounded-corners-borders-please

dosomething August 2, 2011 - 2:13pm

Hi,

When I initially uploaded DoSomething.org , it showed that the page cannot be accessed but relogging in helped for that. Did point that out.

lalit August 13, 2011 - 3:11pm

drupal garden is really awesome.

i like to build my website www.fosterfort.com with drupal garden.

thanks

Rob Loach September 25, 2011 - 5:54pm

You can now use the http://drupal.org/project/javascript_libraries module on Gardens sites to upload any custom JavaScript Library you want. :-)

Chris Brookins September 25, 2011 - 6:51pm

To use the JavaScript libraries module Rob mentions, just enable it on your Drupal Gardens' modules page and click Configuration > JavaScript libraries.


Chris Brookins
VP Engineering, Acquia - blog - twitter -

socifoto September 26, 2011 - 1:49pm

Great improve the JS libraries. Good work, can even activate JQuery UI from there.

Chris Brookins October 3, 2011 - 6:41am

You just enable the JavaScript libraries module, it is built into Drupal Gardens


Chris Brookins
VP Engineering, Acquia - blog - twitter -

energetikusok_admin October 13, 2011 - 2:37pm

Hello Rob !

I have some problem with the file uploadig.

The manual said: "...upload the .js file as a JavaScript Library at admin/config/system/javascript-libraries."

1. I can't  .js fiile load up, but .js.txt

2.The upload process probably load my file into admin/config/system/javascript-libraries/custom up.

3. What can I write in the Library description field ? And I must modify in the script the jCaruselLite text ?

It is possible to add one snapsot from the Edit JavaScript library screen ?

Thx !

Boundless Box Team November 17, 2011 - 7:28am

Hey westbywest....Thank YOU!!!!!   This was driving me nuts...and I Never noticed the quotes because they appear so small.

Seriously....really appreciated!!

Best!

Glenn

Boundless Box Team November 18, 2011 - 9:50am

Thanks Rob. I appreciate your help as well!

Best!

Glenn

ByrdJ June 21, 2012 - 2:46am

Great blog! And thnk you Rob, Chris and all the guys who help and support such noobs as I am :)

James, family tree make free
 

Feedback