Popup Lightbox

Use this component to create a pop-up lightbox of images that can be opened from a link or button (or any other clickable component) on the page. Two styles are available: "Wide" and "Compact".

Gallery

  Settings used for this example:

Component Inspector

Media Foldertravels-and-landscapes
Lightbox TypeWide
Attach-to#gallery-button

Page HTML

<button id="gallery-button" class="btn btn-primary">Click me!</button>

Explanation: We set the "Attach-to" property in the component inspector to the ID of the button element that we want to trigger the gallery from. The script will then add an "on-click" event handler to this button that opens the gallery when it is clicked. We also select the folder of images that we wish to display and set the lightbox type to "Wide". The button that we added to the page is shown in the Page HTML box above.


  Script options...

Gallery

  Settings used for this example:

Component Inspector

Media Foldertravels-and-landscapes
Lightbox TypeCompact
Attach-to#gallery-button-2
Script optionslightbox_show_numbers: false,lightbox_slider_image_border_width: 20

Page HTML

<button id="gallery-button-2" class="btn btn-primary">Click me!</button>

Explanation: We set the "Attach-to" property in the component inspector to the ID of the button element that we want to trigger the gallery from. The script will then add an "on-click" event handler to this button that opens the gallery when it is clicked. We also select the folder of images that we wish to display and set the lightbox type to "Compact". We also add some script options to hide the image numbers and change the image border from the default of 10 to a wider 20 pixels. The button that we added to the page is shown in the Page HTML box above.


  Script options...


  All Available Component Inspector Options for Popup Lightbox Galleries



  Script options applicable to all "Popup Lightbox" galleries...

You can read more and see a lot of examples at the UniteGallery website!