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/
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
- 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.
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.
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:
<a class="colorbox" href="<path_of_image>">