jQuery for Site Builders

All "Click" — No Code

The Deets

Themer? Developer? Neither?
If you can install a module, you can also use jQuery.


Is jQuery Update still hanging out in '09 or 2k10?

I'll show you how stupid simple it is to use alternate versions of jQuery on the same site, at the same time, [hopefully] without breaking anything.

First things, well, FIRST!

Lets get core's included version of jQuery updated. jQuery Update project page

You will also need to download and install Libraries before enabling jQuery Update.

    Drupal 6

  • jQuery v1.3.2
  • jQuery UI v1.2.6

    Drupal 7

  • jQuery v1.5.2
  • jQuery UI v1.8.11

Using the jQuery Update module will NOT break any core functionality. YAY!

Show off your content!

Views Slideshow can be used to create a slideshow of any content (not just images) that can be output by a View.

Wente Vineyards

Wente Vineyards
Adding separate fields that coincide with the design allow beautiful type AND a dynamic layout.

Getting Started in Drupal 6

A few required modules to install before we continue.

  1. CCK
  2. Views [D6 Demo uses 2.x branch]
  3. Views Slideshow [D6 Demo uses 2.x branch]
  4. File Field
  5. Image Field
  6. Image API
  7. Imagecache

Did you add an Image field?

This is the node type that I'll be using in the demo. If yours looks like this, then you're on the right track. Remember, you can add as many fields as you like, just remember to add them to the slideshow view.

What Size should my images be?

If you don't have a set of completed slideshow designs to take measurements from, then make some logical choices when creating your Imagecache presets.

Create some nodes

Instead of manual entry, you can use the Devel Generate module.

The View

No, not that "The View." This view will showcase your content in a super-neat-o slideshow.

The Results


Single Frame Slideshow: Display Fields | Title, Body, Image, Numerical Pager

Single Frame Slideshow Thumbnail Hover Slideshow

More style & options in Drupal 7?

Ipswich Ale Brewery

Ipswich Ale Brewery
What goes better with Drupal than beer? I can't think of anything.

The only active image in this design is the larger one, on the left. This is one of those instances where a pager, slide navigation controls, and extra info would make this look cluttered instead of creative.

The Field Museum uses it too!

The variations on design, implementation, and overall function of the Views Slideshow module are, in my opinion, easier to change in Drupal 7 than in previous versions; at least without writing any code.

The Field Museum of Natural History

Ipswich Ale Brewery
Of course Sue uses Drupal!

Getting Started in Drupal 7

A few required modules and libraries to install before we continue.

  1. Chaos Tools
  2. Views [D7 Demo uses 3.x branch]
  3. Views Slideshow [D7 Demo uses 3.x branch]
  4. Libraries
  5. jQuery Cycle Library

It's Right under your Nodes

Create the fields you want displayed in your slideshow.
I've only created one image style preset because I'm using the media module, which includes some of its own file display types.

Media and it's caveats


Default (active tab), Link, Preview, Small, Large, and Original are the prebuilt file type displays that come with Media. Default and Link do NOT initially have an image style assigned — I assigned the image style I created to 'Default'.

Create nodes for your slideshow

The View

This view will showcase your content in a slideshow with thumbnail navigation and all other fields you wish to include.

The Result

Carousel, Merry-Go-Round — What's the Difference?

Although the difference can be subtle, there is most definitely a difference. Carousels, as we know them around the web, tend to be flat, linear animations. If you want to make your carousel fun, then you want a 3D merry-go-round, but lets save that for another time.

jCarousel is what we will focus on for the moment.

The View

The Result


The style options for jCarousel are pretty straight forward. The only fields that are being output in each row are the thumbnail sized image and the node title.

QuickTabs

There are many ways to build tabbed displays in Drupal, but none as quick and flexible as QuickTabs.

Appnovation Technologies uses Quicktabs on their portfolio page as filters; each tab is using a different Views display.

The Setup in Drupal 6

Each Quicktabs block has independent settings for tab style, loading tab content via AJAX, and a toggle for displaying empty tabs.

The overall Quicktabs Block settings


Individual tab options

The Result


How easy was that?!?!

So What's Different in Drupal 7?

"The Renderer" give you options for how you want your content to be displayed; Accordion, Quicktabs, or jQuery UI tabs.

These options give you more power over the display of various content on your site. Previously, Accordions and UI Tabs could only be created via Views or other modules that utilized those types of data displays.

Want to display output from another module in a Quicktab?

There is now an option to do exactly that.

Having a Callback method for a tab is pretty awesome. You can display the content of any site-relative path (it's not an iFrame, so no external links) in a quicktab. Anything from admin/ to a path generated and controlled by a module — FAQ for instance.

Accordion Rendered Display

The accordion display uses jQuery UI's theme style by default. If you've got a Theme Roller theme available in your code, it will automatically be used. On an unrelated note, if you would like to easily theme all of your jQuery UI elements, the Design Test module will help you with that.

Quicktabs Rendered Display

Just like the style options in the Drupal 6 version, the base Quicktab Styles are available.

jQuery UI Rendered Display

As far as I can tell, the only reason you might want to use the jQuery UI tabs option would be if you are using a jQuery UI theme. Otherwise, the functionality is exactly the same as using the built in Quicktabs Styles.

Concurrent versions of jQuery

You'll want to place the following in the head statement for all rendered pages of your site. In Drupal 6, this will be in page.tpl.php and in Drupal 7, html.tpl.php.

< script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">< /script>
< script type="text/javascript">
  var $jq = jQuery.noConflict();
< /script> 


// The 'Normal' way, when the page is done loading method

$jq(document).ready(function(){
  $jq('#my-div').function();
});

// Doing it the right way with Drupal.Behaviors?

(function ($jq) {

  Drupal.behaviors.mymodule = {
    attach: function (context, settings) {
      $('#mymodule_id', context).change(function () {
          alert('Handler for .change() called.');
      });
    }
  };

}(jQuery));
Syntax and code highlighting courtesy of highlight.js.

A recollection

More Resources

for those of you with thirsty minds

How to install & setup Views Slideshow module on Drupal 7? [http://www.brightwebsitedesign.com/how-to-install-views-slideshow-module-on-drupal7]
Using Newer Versions of jQuery with Drupal 6 [http://drupal.org/node/1058168]
Drupal Javascripting [http://drewish.com/content/2011/05/drupal_javascripting]
Better understanding of behaviours of drupal 7 [http://drupal.stackexchange.com/questions/11756/better-understanding-of-behaviours-of-drupal-7]
The Drupal 6 JavaScript API [http://drupal.org/node/304258]
Managing JavaScript in Drupal 7 [http://drupal.org/node/756722]

More about the jQuery framework for this presentation

Reveal.js, formerly CSS 3D Slideshow, is a tool which allows you to quickly create good looking HTML presentations. Beyond the changed name, the updated slideshow includes a fair amount of new features.


Thanks for the fantastic framework Hakim!

THE END



BY Erik Baldwin / ThatGuy@ErikBaldwin.com


Shout at me on Twitter whenever you want some Drupal Assistance.