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
Code language: HTML, XML (xml)
<!-- 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>
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
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
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.