Colorbox

Drupal Versions
D7
D8
D9
For Installation
General

Colorbox is a popular way to present images, normally pop-up in overlay and enlarged on screen when clicked.

A demonstration samples can be found at https://www.jacklmoore.com/colorbox/example1/

 

 

Requirements For Drupal 8

Requirements for Drupal 7

The colorbox plugin should be placed under /libraries/colorbox.  Then install and enable the modules.  After installation, check system status.

 

After installation, colorbox features can be used in different areas.  One of the common area is image fields in content type display

Content Type

  1. Select the target content type @ admin/structure/types/manage
  2. Edit Content Display
  3. Choose the target image field, select Colorbox format.
  4. Configure desired format and style accordingly.

Note that there are 2 modes of image operation when using Colorbox

  1. Colorbox mode where image is already displayed in a pop-up overlay mode.  This is only when the image is clicked and entered colorbox mode.
  2. Normal image display mode when not clicked.

This Colorbox module handles images in that how they are pop-up in the overlay colorbox mode.  It does not handle the normal image display mode, which should be handled independently.

 

Views

Colorbox options will also be available for images in views.  If colorbox format is selected as the format for an image, similar settings will be available.

 

Inline Images

Colorbox can also apply to inline images after the module is installed.  After uploading an image from inside the CKEditor, modify the source code of the image and add a link to the image itself, like:

<div>
  <a class="colorbox" href="<path_of_image>">
    <img src="<path_of_image>">
  </a>
</div>

 

Colorbox popup overlay modal effect

Colorbox popup overlay modal effect

Colorbox option available for image display
Colorbox setting for images
Colorbox detailed settings
Recommendation
Based on Need