Colorbox Pop-ups with Drupal 7 Images and Videos

| Drupal

Colorbox DrupalA lot of sites like to show media inside pop-ups. Using pop-ups can make it easier for visitors to quickly browse through multiple images or videos.

In this tutorial, we're going to show you how to use the Colorbox pop-up with Drupal.

We'll see how to display both image and video fields inside a pop-up window.

Step #1. Installation

Install these two modules:

Now we need to get the actual Colorbox files:

  • Download the Colorbox plugin from https://github.com/jackmoore/colorbox/archive/1.x.zip
  • Unpack those files and rename the folder to "colorbox"
  • Upload those files to your "sites/all/libraries" directory. Make sure the path to the plugin file becomes: "sites/all/libraries/colorbox/jquery.colorbox-min.js"

Now configure Colorbox:

  • Go to Configuration > Colorbox
  • Check the box "enable colorbox load"

Step #2. Colorbox with Image Fields

  • Go to Structure > Content types > Manage fields
  • Add an image field
  • Click the Manage Display tab
  • Set the format the image to Colorbox.
media_1390491220707.png
  • Click Save.
  • You'll now see some formatting options for the colorbox on this field:
media_1390491203540.png
  • Click the small cog icon and those images will show:
media_1390491243285.png
  • Go and create a content item using your new image field. In this example, I've uploaded 4 beach photos:
media_1390492110401.png
  • Click any image and you'll get the videos showing inside a colorbox. If this doesn't happen the first time for you, clear Drupal's cache.
media_1390492183128.png

Step #3. Colorbox with Video Fields

Now we'll show you to display video inside a pop-up. We're going to use the Video Embed Field.

  • Install the Video Embed Field module.
  • Go to Structure > Content types > Manage fields
  • Add a Video Embed field
  • Click Manage Display
  • Set the Format to Thumbnail Preview w/Colorbox:
media_1390494073507.png
  • Go and create a content item using your new video field:
media_1390493566607.png
  • Drupal will automatically create a thumbnail for you from the video:
media_1390493598392.png
  • Click the thumbnail and you'll get the video inside a pop-up:
media_1390493616726.png

About the author

Steve is the founder of OSTraining. Originally from the UK, he now lives in Sarasota in the USA. Steve's work straddles the line between teaching and web development.