Create a Lightbox in Oxygen Builder With Fancybox

by Abdelouahed

Updated: Sep 30, 2019 

Oxygen offers many basic elements and some combined helpers to help you create advanced layout functionalities, like the sliders and modals, but to create dynamic modals or lightbox, we need to use a third JS library like Fancybox or Lightbox2, both of these libraries require the usage of data attributes on the trigger elements to work, that's why we made the Oxygen Attributes plugin to solve this issue for you

Load the required libraries

To get started on this guide, I chose to work with Fancybox for my lightboxes example, but you can also use other libraries to do the same job.

To add this library to your pages, you can simply put the following HTML code inside a code block element or use a scripts management plugin, note that you may need to get rid of the jQuery line if it was already loaded in your page

<!-- Load jQuery if it's not loaded in your page -->
<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- Load the fancybox css and js files -->
<link href="//cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>Code language: HTML, XML (xml)

Having the libraries loaded in our page, let's go create some attributes to handle the fancybox initialization properly

Add the Fancybox attributes

To handle the different types of lightbox content supported by Fancybox, we need to register a bunch of custom attributes, here is a list of attributes and why we may need them:

  • data-fancybox: this is required to activate the lightbox on click, and also can be set to value to group similar images in a gallery.
  • data-type: fancybox sill automatically detect the type of content, but for iframe or ajax, this attribute is required to work.
  • data-width: override the modal width.
  • data-height: override the modal height.
  • data-caption: display a caption under the lightbox content.
  • data-src: most of the time, the lightbox source be pulled from the href attribute of the link, but this is required to use inline hidden elements.
  • data-fancybox-close: the element having this attribute will be used a close button, often useful to create dismissable modals.

Anyway, here is a preview of how to create these attributes using our Oxygen add-on it is up to you to choose the attributes you may need

  • data-fancybox
  • data-type
  • data-width
  • data-height
  • data-caption
  • data-src
  • data-fancybox-close

More information about these attributes and other is documented in the official documentation of Fancybox

Creating the lightbox gallery

I won't go over all the step to create a gallery because it's as simple as filling the input fields created earlier for each link wrapper of a grid, for inspiration and demo of the lightbox features, you can watch this video

That's all for this guide, hope you learned something new in this tutorial, if you have any questions or found an issue using the plugin, please contact us via the support page.


If you have any questions or require additional information regarding this topic, please feel free to leave a comment on the corresponding Facebook post.

Discuss on Facebook
cross