How to Open Images In Lightbox or Zoom Images in Layers Content Widget

How To  Tutorials  Since: 1.2.11 Last Updated: Layers ver. 1.5 Time to Read: 2 minutes

This tutorial is part of our Content Widget tutorial series. It will walk you through choosing a lightbox plugin, and how to setup your Content Widget to display images in the lightbox instead of linking to a page or post. You can also apply this to featured images in the Slider widget, or other widgets that support Featured Media options.

Difficulty: Easy!

To show images in a “popup” when the thumbnail is clicked, you need a Lightbox plugin. You can checkout your options by going to PluginsAdd New, then search for lightbox

There are many to choose from, but we find the following work very nicely and are actively developed:

Any lightbox plugin which uses the “rel” url attribute will work. This is usually set by default, but can also be found in some lightbox settings.

Once your lightbox is activated, you’re ready to go:

  1. From the Edit Layout screen of the Customizer, click Add A Widget and choose the Content Widget, or expand your existing widget
  2. Expand the column housing the image you want to link to the lightbox.
  3. Click the Featured Media icon in the column options bar image-iconthen click Choose Image
  4. Upload your featured image if needed, otherwise locate your image in the Media Library tab and click to select it.
  5. On the right you will see the image information. Copy the File Url (click into the field and Ctrl/Cmd+A to select All, then Ctrl/Cmd+C)
    • image-file-url
  6. Click Use Image in the lower-right.
  7. Expand the Insert Link section of the column and choose Custom, then paste the file url into the Link URL field.
  8. Place your cursor at the very end of the URL and add ?rel=lightbox
    • Example:
      http://mysite.com//wp-content/uploads/myimage.jpg
      becomes
      http://mysite.com//wp-content/uploads/myimage.jpg?rel-lightbox
  9. Save Changes

That’s it! Preview your page in a new browser tab, then click your image in the widget and it should open in the lightbox. The following example shows a content widget using Simple Lightbox:

content-widget-lightbox

If you want fancier controls or a widget that does all this automatically, you can find several gallery and portfolio extensions for Layers under the Marketplace tab in your admin, such as Gallery Mojo(add images directly to create a lightbox gallery) and CMK Portfolio(uses post types with featured images that open a content lightbox), which have varying styles and functionality. Be sure to review the details and demos for each to find the one that works best for your project.

See How to Add Galleries to Layers Content Widget Columns for a quick way to add gallery grids to your widget columns that work with your lightbox.