Lightbox
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ullamcorper mauris, vitae imperdiet tortor. Cras aliquet gravida lacus eu auctor
Lightbox Gallery
WoodPecker using Bootstrap Cards to set the layouts for a Lightbox Gallery. This gives you the flexibility to play with the WoodPecker® card variables and yet apply the power of Lightbox Gallery! The HTML structure is flexible to add elements to the Lightbox> Have Fun!
<div id = "wdpk-light-gallery-1" class = "card-columns wdpk-light-gallery">
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-1.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-1.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-2.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-2.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-3.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-3.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-4.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-4.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-5.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-5.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-6.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-6.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-7.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-7.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-8.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-8.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div class = "wdpk-light-gallery-cont" data-src = "/assets/images/gallery/gallery-9.jpg">
<span class = "wdpk-light-gallery-hover"><i class = "fas fa fa-search"></i></span>
<img src = "/assets/images/gallery/gallery-9.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
</div>
/* No Changes Made To Default Variables */
jQuery(document).ready(function ()
{
if (jQuery(".wdpk-light-gallery").length !== 0)
{
let obj = {
selectorID: 'wdpk-light-gallery-1',
thumbnail: true,
animateThumb: false,
showThumbByDefault: false
};
require(["app/shortcodes/wdpkLightGallery"], function (e)
{
e.publicCall(obj);
});
}
});
