Lightbox Video
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at ullamcorper mauris, vitae imperdiet tortor. Cras aliquet gravida lacus eu auctor
Lightbox Gallery - Video
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 style="display:none;" id="video1">
<video class="lg-video-object lg-html5" controls preload="none">
<source src="/assets/video/video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<div style="display:none;" id="video2">
<video class="lg-video-object lg-html5" controls preload="none">
<source src="/assets/video/video-2.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<div style="display:none;" id="video3">
<video class="lg-video-object lg-html5" controls preload="none">
<source src="/assets/video/video-3.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<div class = "card">
<div data-poster="/assets/video/video-poster.jpg" class = "wdpk-light-gallery-cont" data-html="#video1">
<span class = "wdpk-light-gallery-hover"><i class="fas fa fa-play"></i></span>
<img src = "/assets/video/video-poster.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div data-poster="/assets/video/vide02-poster.jpg" class = "wdpk-light-gallery-cont" data-html="#video2">
<span class = "wdpk-light-gallery-hover"><i class="fas fa fa-play"></i></span>
<img src = "/assets/video/vide02-poster.jpg" class = "wdpk-light-gallery-img">
</div>
</div>
<div class = "card">
<div data-poster="/assets/video/vide03-poster.jpg" class = "wdpk-light-gallery-cont" data-html="#video2">
<span class = "wdpk-light-gallery-hover"><i class="fas fa fa-play"></i></span>
<img src = "/assets/video/vide03-poster.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);
});
}
});
