Lightbox Inline Images


Contributed Modules

Basic Colorbox

  • Install colorbox, colorbox_inline
  • Add a link around the image, with href="path to larger version of the image", and class="colorbox"

This will open images in a colorbox.  The plain colorbox style for images is very nice in this scenario.

Colorbox Image Galleries

This is where you can open any image on the page in a lightbox, and clicking forward and back links will open the next and previous images on the page in the lightbox without closing the lightbox or reloading the page.

In addition to the basic colorbox modules and configuration, you need to:

  • Install colorbox_load and ng_lightbox.  Remember to put the colorbox library into /libraries/colorbox (just check the status report).
  • Add the following to the link around the image: data-colorbox-gallery="<gallery group name>" where the gallery group name can be anything, say "a"
  • Of course the link still needs the colorbox class.


Lots of work for images

I've been working on image field migration for D6 -> D8 recently, and (with Mike Ryan's help), I ended up with a way to migrate image fields with a lot less work. In your case, it would come out as something like

plugin: iterator
source: field_image
plugin: migration
migration: file
source: fid
alt: alt
title: title
height: height
width: width