In this post I will do a brief introduction on the RoyalSlider module for Drupal. At the end of this post you'll be able to make a slideshow of images that work great on both desktop and all your touch-enabled devices! So lets go and talk about:

The RoyalSlider plugin

RoyalSlider is a great JavaScript plugin, developed by Dmitry Semenov and available here on CodeCanyon. It's not free, but it's hard to beat for pricing compared to making it yourself ($12 at the time of writing). The reason I've chosen to use it for my projects is because of its support for touchscreens. But there's alot more to this plugin than that. Some things I considered as important:

  • Great documentation & support.
  • Easy to use api
  • Preloading images
  • Skins
  • Support for HTML content
  • Support for video content

For a full demonstration of its capabilities, check the RoyalSlider demo website.

Setting up the module

To get up and running with the RoyalSlider module, you need a couple of things:

The JavaScript plugin should be downloaded and extracted to the libraries folder (most problably /sites/all/libraries) so that jquery.royalslider.min.js exists at /sites/all/libraries/royalslider/jquery.royalslider.min.js.

As mentioned in the dependencies, you need jQuery >= 1.7 for this to work, so go to admin/config/development/jquery_update to change jQuery to version 1.7 or higher.

Once you have downloaded all the code, go to the modules page (/admin/modules) and enable RoyalSlider.

The RoyalSlider module for Drupal also offers integration with Views, but installation and usage of that will be the topic of a future blogpost!

Using RoyalSlider as an image field formatter

This will demonstrate how to use RoyalSlider as an image field formatter.
The use-case is that you have a single node with an image field containing multiple images. In this example lets say we are building a website for a used spacescraft seller.
Each spacescraft is its own node, and contains several photos of the spacescraft.
There are four steps to get our used spacescraft slideshow working:

  1. Create new content type
  2. Add an image field to the content type
  3. Choose RoyalSlider as the display formatter
  4. Create a node

Let's go over these steps.

Step 1: Create new content type

Creating a new content type is easy in Drupal (as you probably already know), so we'll keep this step short: Go to admin/structure/types/add, pick a name for your content type and hit save and add fields. For this example I've created a content type called 'Spacecraft'.

Step 2: Add an image field to the content type

image field

And allow it to have an unlimited number of items

field settings

Step 3: Choose RoyalSlider as the display formatter

Once you've added the field that will contain the images, go to the Manage Display tab of the content type. There you will see the image field, and you'll have the option to change the formatter from Image to RoyalSlider. formatter Once you have selected RoyalSlider as the formatter, you can use the little settings dial on the right to change the formatter settings. formatter settings There are two options here: 'Option set' and 'Skin'. I will go into further detail about the options in a future blogpost, but you can go ahead and fiddle with creating custom Option Sets at admin/config/media/royalslider.

Step 4: Create a node

The final step in creating your slideshow is creating the first Spacecraft node and adding some pictures. Go to node/add/spacecraft and add a title and some photo's and hit save. create spacecraft And there's your first awesome, touchie draggie slideshow! first slideshow

To be continued...

There is more to this module. Besides using it as an image field formatter, you can also use it as a views slideshow plugin. And on top of that, you can also create feature-exportable presets that allow you to customize the slideshow. I'll blog about these two topics in part II and part III of this series, so stay tuned!

comments powered by Disqus