Drupal 7 Colorbox module

By shane
Fri, 2013-02-08 09:07
Daily Dose of Drupal Episode #105

Share with Others

The Drupal 7 Colorbox module is one of the many Drupal modules that allows you to display things in a lightbox style modal dialog window.

In this episode you will learn:

  • How to use the Drupal Colorbox module to display image fields in a Colorbox window

Thanks again to Drupalize.me for sponsoring this episode of the Daily Dose of Drupal.

Hello everyone and welcome to another Daily Dose of Drupal, today we’re on Episode Number 105 and today we’re going to be covering the very basics of the Colorbox Module. Most of you or at least many of you may be familiar with this module already and so I’m not going to spend too much time on it, I’m going to go over just the basics for those of you who haven’t or using some other type of Lightbox plug-in or some other type of Drupal module to handle your model dialog type windows.

And what the Colorbox Module is really good at is displaying images inside basically a Lightbox on your Drupal sites. So one of the main uses I use it for is along with Drupal commerce and displaying product images, it also can be used for slideshow, things like that, I’m going to go over just the basics and how it integrates in with the core image module and we’ll also discuss a little bit how it can be integrated with views and that type of thing. There are other screencast on this that go into more detail.

I haven’t watch them but I’m sure they can at least get you started or continue along the path if you do want to learn more about this module. There’s also some documentation here which talks about installing the module, it’s a little bit more complicated of an install. You have to install the module and the plug-in so you’ll need the libraries module as well if you’re using the Drupal 7 version and you’ll have to install the J Querry plug-in in the site’s all libraries directory.

So before we get started; as always I’m Shane Thomas, you can follow me on Twitter @smthomas3, also go to codekarate.com and sign up for the newsletter if you haven’t already and today we’re getting sponsored by drupaliza.me. You should definitely go to drupalize.me and check it out especially if you’re interested in learning more about Drupal.

Drupalize.me is a whole bunch of really really well put together Drupal videos from the very basics to the very advance type topics so whether you want to learn about scaling Drupal or whether you want to learn how to build the Drupal view. Go ahead and check them out, use the code you see here CK20FEB and you get 20% off in anything you purchase at drupalize.me so go check them out and let them know that you appreciate them sponsoring the Daily Dose of Drupal, I certainly do.

We’re going to go ahead and get started; I already have the Colorbox Module installed and I have the plug-in, the J Query plug-in also installed so we’re pretty much ready to go. You can see there’s some configuration options. Some of these extra features are very handy such as Enable Colorbox Load. This enables you to use custom links to open forms and paths in a Colorbox.

So you simply use Colorbox load as a class on the link and then you put together URL like this and when you click on the link you will then automatically load that inside of a Colorbox. You can also use Colorbox In-line and allow you to open In-line content in a Colorbox; you just use the Colorbox In-line class. So these two are handy especially if you want to go outside the basics of what Colorbox can do and allow it to be more flexible.

There’s a couple of different styles which is nice; you can have different styles right out of the … right after the Fresh Install of the Colorbox Module, you can also add your own and there’s some instructions I believe in the documentation and in the Read Me file on how to create your own Colorbox Style and of course you can do a lot with just CSS as well so you can make some of the changes just to CSS, you can allow Custom Options so it’s very configurable, you can have … change a whole bunch of information about how it’s displayed when you click on something that triggers Colorbox pop-up and there’s some other advance settings such as hiding it on specific pages and what type of compression level.

Obviously if you’re on development you can uncompressed it but on production sites you want to keep that in the minified version. So that’s all the configurations option and another thing you want to check is this is probably before you even started configuring the site. Just make sure that the Colorbox. jQuery plug-in is installed and the Colorbox module recognizes that it’s there because obviously without this plug-in the Colorbox module isn’t going to work correctly.

So while that loads I’m going to go ahead and show you a content type we created in the last video that happens to have… it is used in the Conditional Fields Module but it has an image field and that’s going to be good enough for us to get started. As you can see in the Status report there’s a Colorbox plug-in section, make sure that shows up in green and not in red and you should be good to go. So I created this simple content type which is just a picture.

It says favorite vegetable but if you watch yesterday’s video you’ll understand that I was just demonstrating how to use an image fields with a conditional fields module. Simply an image has been uploaded to this content type but what I want this to be is display perhaps a thumbnail, in one click display the full size image in the Lightbox or at least a much larger image.

This can easily be done using the manage display tab on the content type. Obviously the manage fields tab has the actual image itself, the manage display tab allows you to set the format to Colorbox. Inside the Colorbox settings you can go ahead and say the content image style so we can set it as a thumbnail.

This is how it’s going to originally display as well as the Colorbox image style so I can set this as a medium or a large image or leave that the original, I’ll select Large here. You can say how you would like them to group and group the images into a gallery so it can be per post, per page, per field. So we’ll leave it per post and you can have the caption be All text, Title Text or Automatic.

So I’ll go ahead and set that and now I will refresh this page, you can see we have a nice thumbnail image and when I click it … for some reason it didn’t want to load the Colorbox. Let me flush the caches here, there we go. I just had to clear the cache after I install the module and configure it for the first time. A hard refresh for the page probably will done the trick as well but you’ll notice as I click this it brings up the image, it has a caption, if I hop over it which is just the caption pulled I guess from the of the node. One thing we can try here is in this manage fields for this test content type.

I’m going to allow multiple images to be uploaded here and show you how they can then be group together into a gallery. Number of values I’ll just go ahead and select Unlimited, I’ll just upload a couple. Now when I come back to this content I’ll upload a few more images and I will save this.

Now you can see that they’re show up. They all show up as thumbnails but when I click on it you’ll notice that now I have … it says 1 of 3, I can simple flip through the images and I now have an image gallery. So you can see it’s incredibly easy to just get the Colorbox Module working with the Core Drupal 7 Image Module, works pretty much out of the box so just nice Display Formatter option on the field.

It also works great with views so if you do have a view where you’re displaying an image you can do the same basic settings that you saw on the actual manage display. It’s very similar and of course you’re using the Views interface instead of this but you’ll be able to set a lot of these same options and you’ll be able to configure it so when you have a view that displays an image you can allow that to also show up in the Colorbox.

Go ahead and check out the other documentation on the Colorbox drupal.org page for more information and it also lists modules that have built-in support for Colorbox and a bunch of other cool things so go ahead and check that out. The Colorbox module is just one of many of these types of modules but this is the one that I used the most so go ahead and give it a try if you haven’t already and see which one you like best.

Let me know in the comments or you can find a way to contact me and we can have a discussion about the best Lightbox plug-ins for Drupal. Thanks again to drupalize.me for sponsoring this episode of the Daily Dose of Drupal and thank all of you for watching, see you next time.