Colorbox Pop-ups with Drupal Images and Videos

A lot of sites like to show media inside pop-ups. Using pop-ups can make it easier for visitors to quicky 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.

Installation

Install these two modules:

• https://drupal.org/project/colorbox
• https://drupal.org/project/libraries

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"

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.

• Click Save.
• You'll now see some formatting options for the colorbox on this field:

• Click the small cog icon and those images will show:

• Go and create a content item using your new image field. In this example, I've uploaded 4 beach photos:

• 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.

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:

• Go and create a content item using your new video field:

• Drupal will automatically create a thumbnail for you from the video:

• Click the thumbnail and you'll get the video inside a pop-up: