lightbox
This template uses Magnific Popup plugin, the library is included and you can use it however you want. We have added a wrapper above it to make it easy to use. Here is how.
Single Light-box
It is represented by .ol-lightbox class and we need to declare an anchor for the div. Basic markup is like:
<a href="../../assets/img/hovers/01.jpg" class="ol-lightbox">some text</a>By clicking on the some text above a light-box will open showing the image declared at href
A more advanced example:
<a href="../../assets/img/hovers/01.jpg" class="ol-hover hover-5 ol-lightbox">
<img src="../../assets/img/hovers/01.jpg" alt="image hover">
<div class="ol-overlay ov-light-alpha-80"></div>
<div class="icons"><i class="fa fa-camera"></i></div>
</a>
A light-box is capable of showing
Image
Youtube Video
Vimeo Video
Ifram
Examples:
YouTube light-box
The markup would be:
Vimeo light-box
The markup would be:
TED Talks
Note You can embed any embeddable medias including Sound-cloud items, Ted talks, ...
Self hosted video
Light-box Gallery
A light-box gallery is a array of light-boxes that can be navigated once the light-box is viewd.
You just need to add .ol-lightbox-gallery to one of the parent nodes of the several .ol-lightbox elements.
Note You can use any of the light-box types(i.e. image, video) in the gallery.
Last updated