Hi guys,

Sorry if this seems stupid, but for the life of me I cannot find any instruction/documentation that shows how to actually use colorbox i drupal!?

I know that there is a little text page that is supposed to be the documentation but its completely useless and does not tell you how to actually display an image or inline content in it.

In fact, to find instructions on how to load a simple image in colorbox, i had to search outside of drupal.

Anyway, I know its a great module, and thanks a million for the work that has gone into this.

But, where would one actually go to see "This is how you show an image in a colorbox in drupal", "This is how you show an html page /inline contet in colorbox in drupal" , etc.....

I got the image working, and now I just want to show a simple .swf/flv file in colorbox, but I just cant fond any resource that shows how to do this.

Thanks a million!


frjo’s picture

If you want to use the Colorbox plugin manually in Drupal the best documentation is on the plugin homepage http://colorpowered.com/colorbox/.

There are some script to help you, look under "Extra settings" on Colorbox module settings page.

The easiest way to use Colorbox in Drupal is to use one of the modules that integrates with it.

File Field/Image Field, Embedded Media Field, Insert etc.

frjo’s picture

Status: Active » Closed (fixed)
pkosenko’s picture

Interesting that no one has bothered to document how to use colorbox in Drupal.

I am guessing that the "Other modules that work with Colorbox" insert LINK code into the HTML that they are configuring. But what they insert SHOULD be documented so that it isn't necessary to have to load up on extra WSIWYG modules if not needed.

From what I can see, the Drupal "colorbox" module can't be relied on to be identical to the original JQuery app, since it had to be reconfigured to work with Drupal.

The following gets inserted on the Drupal page, and none of it tells you what the link configuration is (what class names are being used, for example) or what extra JavaScript might be required to be written to invoke the various configurations of colorbox:

@import url("http://localhost:[port#]/sites/all/modules/colorbox/styles/default/color...");
<script type="text/javascript" src="http://localhost:[port#]/sites/all/modules/colorbox/js/colorbox.js?mkaquk"></script>
<script type="text/javascript" src="http://localhost:[port#]/sites/all/modules/colorbox/styles/default/color..."></script>
<script type="text/javascript" src="http://localhost:[port#]/sites/all/modules/colorbox/js/colorbox_inline.j..."></script>

Then default settings from the colorbox admin module written to JavaScript:

jQuery.extend(Drupal.settings, {


"colorbox":{"opacity":"0.85","current":"{current} of {total}","previous":"\u00ab Prev","next":"Next \u00bb","close":"Close","maxWidth":"98%","maxHeight":"98%","fixed":true},



frjo’s picture

Version: 6.x-1.x-dev » 7.x-2.x-dev
Status: Closed (fixed) » Active

The Colorbox plugin is used as is by the Colorbox module. Users download the plugin themselves directly from http://www.jacklmoore.com/colorbox/.

The Colorbox module then includes the plugin on all but a few pages (see settings) and you are free to use it as described on the plugins homepage.

Most of the code in the Colorbox is module is to create a Colorbox field formatter for image fields. This is how most people use it, myself included. I create an image field on an entity and select the Colorbox formatter for it and that’s it.

alrueden’s picture

The version on the website linked above does not work with a standard Drupal 7 installation. I don't know what it would take to make that version work, but it doesn't. This is the correct plugin to use: https://github.com/jackmoore/colorbox/archive/1.x.zip

The documentation on the module page is confusing on that point. It says first to use that link, then later to use the version on the website. For the OP, here's what I did to make it work:

  1. Unzip that file into sites/all/libraries
  2. Rename the folder to 'colorbox', so you have sites/all/libraries/colorbox
  3. Install the Libraries module and enable
  4. Install the Colorbox module and enable

Now you can follow the other directions for applying the Colorbox to images. I already had an entity type with an Image field, so all I had to do was go to Manage Display for that entity type and choose Colorbox. (admin/structure/types/manage/[my content type]/display)

pkosenko’s picture

@alruenden Thanks. I discovered that the latest incarnation of colorbox didn't help me.

I have the Acquia distribution of Drupal 7 running in WebMatrix (Windows). What I did was download and install the "jquery_update" module to make sure that JQuery was up-to-date. And I downloaded the "colorbox 1.x" plugin ZIP from the colorbox module page and installed THAT plugin (not the latest from the colorbox site) in the "sites/all/libraries" folder in a "colorbox" subfolder. That fixed issues. I haven't tried EVERYTHING yet (busy doing my 85-year-old dad's taxes), but it looks like that fixed the issues I was having. I will have to delve deeper, however, to figure out why installing the colorbox module out of the box doesn't quite always work. Shouldn't it have warned me if I needed to update JQuery? I'm not actually sure that I needed to update JQuery, but it didn't hurt.

drtrueblue’s picture

To other noobies out there like myself, it actually was pretty easy in the end. Essentially all that was needed for my install:

  1. Installed everything according to the module page -> Did not display a colorbox.
  2. Installed jquery update -> Worked great.

A previous thread mentioned the need for the jquery update was in the read me file, but I didn't see it in the current version. For what it is worth, it might be quite helpful to include that information on the module page itself. This is with the noobie understanding that it is needed for all new installs, apologies if I am incorrect.

Thanks for the great module.

frjo’s picture

Status: Active » Fixed

Please help build the documentation at http://drupal.org/node/1971564

drtrueblue’s picture

I added the instruction regarding jQuery Update to the documentation. I was not in the habit of editing module documentation, so my apologies if was less than best practice. Again, thank you for the support.

frjo’s picture

jQuery Update is only needed with the D6 version. You may use it with the D7 version as well but it's not required in any way.

I have updated the documentation with this information now.

drtrueblue’s picture

Thank you. For my D7 install, it seemed the jQuery Update was required. Perhaps I'm mistaken and thank you for updating the documentation.

If I may have pursue a tangential request, could you take a peek at this issue? I'm asking because the server gave me an error message when I submitted the issue, so I wasn't certain if it got properly routed.

frjo’s picture

If you use the 1.x branch, as recommended, of the Colorbox plugin jQuery update is not needed.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

new123456789’s picture

Are you referring to the "sites/all/libraries/colorbox/jquery.colorbox-min.js" file or is there more to it?