ReadyTalk

Meet with Confidence

Creating a New Website: Integrating a jQuery carousel in to Drupal

Posted by Daniel Linn on
Share this Post:

In ReadyTalk’s new website design, we’ll provide up-to-date, dynamic information to our customers in a number of ways. One of those will be a carousel on the front page of the website. We want to load data asynchronously on to the front page to reduce loading times and we want it to load from Drupal nodes for easy maintenance. We originally went to find a Drupal carousel plugin, but none existed that met our needs.

We decided to use jQuery Tabs since Drupal comes with jQuery installed. It was easy to integrate in to our theme files using the great documentation provided by jQuery Tools. We also installed the jQuery Update module for Drupal to bring jQuery up to speed.

jQuery tabs offers a slideshow plugin for Tabs that makes for a great carousel with some useful features, such as navigation elements, smooth transitions and pause on mouse hover. The only hurdle we encountered with this setup was pulling nodes cleanly in to the carousel.

Loading a node would also pull all the page layout data with it – any associated blocks or theme data would be pulled in to the carousel – not what we want. This solution is simple and works great for loading the content of a node and nothing else. Appending any address with ?ajax=1 will automatically grab the node content by itself, exactly what we want for loading via jQuery. This solution is also applicable to any circumstance where node data might be pulled asynchronously.

So, long story short:

 

All done!

Have you done something similar? How did it work? What are other ways to do this?

This is the third post in the “Creating a New Website” series. See posts one and two for other web site ideas.


Name: Shawn Michaels
Time: Tuesday, September 18, 2012

Thanks for taking the time to discuss this, I feel strongly about it and love learning more on this topic. If possible, as you gain expertise, would you mind updating your blog with more information? It is extremely helpful for me. BY - Drupal Web Design

Comments for Creating a New Website: Integrating a jQuery carousel in to Drupal

blog comments powered by Disqus

Recent Posts

Where to Find a Great Webinar Speaker

Where to Find a Great Webinar Speaker Have you ever needed a webinar speaker but not sure where to look? The great thing about a webinar is that your speakers and experts can be...

ReadyTalkers Take to the Park

ReadyTalkers Take to the Park Today’s post is provided by Samantha Mizzi a quality assurance engineer at ReadyTalk. Samantha is an active member of ReadyTalk’s Charitable...

5 Awesome Reasons to Attend Dreamforce '14

Dreamforce '14 is quickly approaching! Are you planning on attending? If you are still unsure and need just a little push to commit, check out these 5 awesome reasons to attend.  ...

Sales & Marketing 101: What We Don't Learn in College

Sales & Marketing 101: What We Don't Learn in College Today's post is from Brittany Jones. Brittany was recently hired as a marketing coordinator after being a ReadyTalk intern for...

Giving to the Greater Community

One thing that I appreciate about ReadyTalk is our sincere wish to make a positive difference in our community.  This certainly applies to relationships with other businesses and...

A Customers Perspective: Using ReadyTalk for Tech Training

A Customers Perspective: Using ReadyTalk for Tech Training Today's post is provided by Kelsey Harms, a computer specialist with the Illinois Education Association. IEA is a...

Growth Through Marketing and Innovation: How Peter Drucker Shaped ReadyTalk

Growth Through Marketing and Innovation: How Peter Drucker Shaped ReadyTalk Those who know me well know that I read a lot of business books. Besides Jim Collins, the books and...

New from ReadyTalk: Pause Desktop/Application Sharing

Keep Presentations Professional with Pause Have you ever wanted to pause screen sharing in a meeting to do things on your system without showing potentially confidential...

New Functionality for ReadyTalk for Salesforce Users

The ReadyTalk team continues to add new features to our Salesforce application to create additional efficiencies for our customers when using the two applications in their...