Colorbox Pop-ups with Drupal 7 Images and Videos

Colorbox Drupal

A 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

Author

  • Steve Burge

    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.

0 0 votes
Article Rating
Subscribe
Notify of
15 Comments
Oldest
Newest
Inline Feedbacks
View all comments
Snabblån
Snabblån
10 years ago

Interesting to see .. thank you it’s well done 🙂

Michael Probst
Michael Probst
10 years ago

I found this article in TheWeeklyDrop after I just spent three hours chasing a problem in the Colorbox and Media Gallery module, sadly, to no avail.
Has anybody had the problem when setting up an image gallery with Media Galery, and choosing “show in lightbox” the images within the lightbox will link to the detail view of the image. I would prefer to remove that link.
On [url=http://birko-flemming.de/galerie/photogalerie]http://birko-flemming.de/ga…[/url] , you click on a photo and the colorbox opens. But the content of the colorbox is not only the image, but the body of [url=http://birko-flemming.de/media-gallery/lightbox/35/47]http://birko-flemming.de/me…[/url] . And this content features a link around the image, namely [url=http://birko-flemming.de/media-gallery/detail/35/47]http://birko-flemming.de/me…[/url] . I cannot find a way to remove that link.
Thanks for any help provided on how to remove the link or find a better solution in general.

Sree
Sree
9 years ago

How to autoplay the video in colorbox ?

Sharon
Sharon
9 years ago

Which versions were you using?

Ivo Boon
Ivo Boon
9 years ago

Sorry, I can’t make this work.

I’m just starting with Drupal, trying to remake an (old) Joomla site.

I installed colorbox module and plugin as described. The status report tells me “colorbox plugin not detected”. There are a lot of so-called solutions to this on the internet, but the ones I tried don’t work. Someone suggested to reinstall colorbox module AFTER installing the plugin. I can’t even remove it: after confirming the remove I get a ‘successful’ message, but when I go back to the module list it is still there. And of course, trying to reinstall it gives an error message ‘module already exists’.

So I am really stuck here.

Can somebody help me?

Thanks.

ronchica
ronchica
9 years ago
Reply to  Ivo Boon

Check out: [url=https://www.drupal.org/node/1074474#comment-9137159]https://www.drupal.org/node…[/url]
solved my colorbox install problem.

wreckage
9 years ago

Hello there.
Again, I cannot follow your instructions. You write:

Under ‘Installation’,
“Go to Configuration > Colorbox”

This should be; “Go to Configuration > Media > Colorbox
Place check mark in “Enable Colorbox load” only, leave other settings for now, then ‘Save Configuration'”
Under “Colorbox with Image Fields”
You have written; “Go to Structure > Content types > Manage fields”
Do you mean “Stucture > Content types > Gallery > Manage fields”, or “…> Gallery Item > Manage fields”?
To further confuse the issue, you have then written; “Go and create a content item using your new image field.” By “content item”, do you mean Content Type?
Please explain to me how I can create a field prior to creating a Content type, because I ‘m not getting it.
While I really appreciate the time you take to create tutorials, it would be less of a stressful experience if they were written in a way that used correct terminology and correct menu paths, etc. I understand it must be difficult to realise how Drupal-ignorant some of your pupils must be, but please cater for the lowest common-denominator as I don’t have the time to sit here and experiment with “Oh, maybe he meant this.. or perhaps if I did that …”
Thank-you.
Regards,

steve
steve
9 years ago
Reply to  Slartibartfast

Hi Slartibartfast
No, these links are correct for default Drupal.
My guess is that you have an different admin menu installed, perhaps this one: [url=https://www.drupal.org/project/admin_menu]https://www.drupal.org/proj…[/url]

Michael Minter
Michael Minter
8 years ago
Reply to  steve

Hi Steve,
I don’t think you read all of this. I am stuck here. So I am pasting in one of Slartibast’s q’s…
Do you mean “Stucture > Content types > Gallery > Manage fields”, or “…> Gallery Item > Manage fields”?

Lolita Vasquez
Lolita Vasquez
7 years ago
Reply to  Slartibartfast

I’m having the same issue as you with Structure > Content Types > Manage Fields…
What I see is this – [url=https://screencast.com/t/qmwuK0DiAlC]https://screencast.com/t/qm…[/url]
Was this a misprint in the blog? Or am I in the wrong place? Thanks for your help.

Vishal
Vishal
8 years ago

Can You tell me how… we can make that color box images in one line like Image grid

web design
web design
8 years ago

Hi ..

I have downloaded the colorbox module its working fine bt the problem is i only want to see the preview of one image rest will display on popup can it be possible, please help???

web design
web design
8 years ago

Can You tell me how… we can make that color box images in one line like Image grid

abrahamdsl
8 years ago

So, we cannot do this in the images within the node, automatically? That is, without enclosing the images within an ” element and its classes being ‘colorbox’?

Ameer Khan
Ameer Khan
6 years ago

For drupal 8 users, Check this module https://www.drupal.org/project/simple_popup_blocks.

Description: You can turn any blocks, views, forms or anything with CSS selectors into popup.

15
0
Would love your thoughts, please comment.x
()
x