Slideshow Lightbox slide show light box

To extend the native "Slideshow" Builder element with a "Lightbox" feature, edit it and take these steps:

• Click on the tab "Advanced" (that of the Slideshow, not that of an item!), scroll down to the field labeled "Attributes", and insert this line

    uk-lightbox="toggle: a.el-link"
  

• Scroll further down, and enter the following into the field labeled "CSS":

     .el-overlay, .el-link {
     padding: 0;
     width: 100%;
     height: 100%;
     }
     .el-link {
     position: absolute;
     display: flex;
     justify-content: center;
     align-items: center;
     }
  

• Apply these in the tab "Settings":

  • OVERLAY > Container Width: None
  • OVERLAY > Margin: None
  • OVERLAY > Position: Center
  • OVERLAY > Style: None
  • LINK > Text: ... can optionally contain the markup for an icon like <i uk-icon="icon:expand; ratio: 3"></i>, for instance, or a text like "Show image", for example, or it can be empty. NOTE: I have found you need something in the link text or the lightbox stops working. So something like ... if you don't want text showing.
  • LINK > Style: Link

• Edit the Grid Item, and in the tab "Content", field LINK > Dynamic > Article: ... select the same image you have selected for IMAGE > Dynamic > Article: ....

  The image defined via "LINK" is the one which is supposed to be displayed in the Lightbox.

Save the changes, test the result.