Using Responsive Lightbox Block

Operand ships out-of-the-box with a custom block called the 'Responsive Lightbox' block.  This is a responsive lightbox block based on Chocolat.js and can serve to display image galleries and/or zoomed-in versions of images in an aesthetically pleasing fashion.  Building your responsive lighbox galleries is as simple as adding a Concrete5 image slider and gives non-technical users the ability to add unique Concrete5 blocks to their website.

Adding Block to Page

From the Concrete5 'Add Block' panel, scroll to the bottom where you will see the 'Chocolat.js lightbox' block.  Drag it into your page where you want your lightbox image to be placed. 

  1. Give your lightbox image gallery a name and select a thumbnail image to represent the gallery.  The beauty of this custom block is it uses native Concrete5 file manager functionality so selecting and uploading images is a snap!
  2. Add as many full-size images as you desire to the gallery below the thumbnail and when you are ready save the block and add it to your page.
  3. Lastly, you will see that when you click on your lightbox image thumbnail your image gallery will appear fully on your website and can be scrolled through, maximized and/or closed on demand.