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/
Video
Installation
Requirements For Drupal 8
- Colorbox plugin only.
Requirements for Drupal 7
- Colorbox plugin
- Library API module
The colorbox plugin should be placed under /libraries/colorbox. Then install and enable the modules. After installation, check system status.
How to Use
After installation, colorbox features can be used in different areas. One of the common area is image fields in content type display
Content Type
- Select the target content type @ admin/structure/types/manage
- Edit Content Display
- Choose the target image field, select Colorbox format.
- Configure desired format and style accordingly.
Note that there are 2 modes of image operation when using Colorbox
- 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.
- 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>