Author: Alexander Buzmakov
In the French Oxygen Facebook group, I saw a question how to make it so that when you click on one specific image in the Gallery element, you could call Modal. At the same time, the standard lightbox function should work on the rest of the gallery images. It became interesting to me and I decided to experiment with this and this is what I got.
Let's imagine that we need to create a gallery in which the second and fourth image should be triggers to call Modal with individual content. First, in the settings of each Modal, you must leave the "Trigger selector" field empty. See example:
Now, to make the second image trigger the first Modal, you need to add the following javascript code to the Advanced > JavaScript tab in the Modal settings:
jQuery(document).ready(function($){
$('.oxy-gallery-item:nth-child(2)').click(function(){
$('#%%ELEMENT_ID%%').parent('.oxy-modal-backdrop').css('display','flex').addClass('live');
$('.pswp').css('display','none');
$('.oxy-modal-backdrop').click(function(){
$('.pswp__button--close').click();
});
});
Further, in order to make the fourth image of the gallery a trigger of the second Modal, you also need to add this code to the second Modal. However, instead of the .oxy-gallery-item:nth-child(2) selector, you need to specify the .oxy-gallery-item:nth-child(4) selector (this way we will select the fourth image).
Important: if you have multiple galleries on the page, then you may need to specify the image selector more specifically, for example #_gallery-4-410 .oxy-gallery-item:nth-child(4) — thus you refer to the selector of a particular gallery.
This article discusses a figurative example. Depending on your needs, you can use one or several Modals and connect them to any image in the Gallery.
See example what we got. When you click on the second image, Modal is called with individual content:
