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>

Single Light-boxs

A light-box is capable of showing

• Image

• Youtube Video

• Vimeo Video

• Ifram

Examples:

• YouTube light-box

  The markup would be:

  <div href="http://www.youtube.com/watch?v=0O2aH4XLbto" data-type="iframe" title="some title" class="ol-lightbox">
    ...
  </div>

• Vimeo light-box

  The markup would be:

  <div href="https://vimeo.com/45830194" data-type="iframe" title="some title" class="ol-lightbox">
    ...
  </div>

• TED Talks

  <div href="https://embed-ssl.ted.com/talks/christine_sun_kim_the_enchanting_music_of_sign_language.html" data-type="iframe" title="some title" class="ol-lightbox">
    ...
  </div>

  Note You can embed any embeddable medias including Sound-cloud items, Ted talks, ...

• Self hosted video

  <div href="video/02/02.mp4" data-type="localvideo" title="some title" class="ol-lightbox">

Light-box Gallery

A light-box gallery is a array of light-boxes that can be navigated once the light-box is viewd.

Light-box Gallery

You just need to add .ol-lightbox-gallery to one of the parent nodes of the several .ol-lightbox elements.

<div class="row ol-lightbox-gallery">

    <div class="col-sm-6">
      <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>
    </div>

    ...

</div>

Note You can use any of the light-box types(i.e. image, video) in the gallery.