# lightbox

This template uses [Magnific Popup](http://dimsemenov.com/plugins/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](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV0AT64pJTM4esUFxx%2FSingle%20Light-boxs.png?generation=1535987989479329\&alt=media)

A light-box is capable of showing

* Image
* Youtube Video
* Vimeo Video
* Ifram

Examples:

* YouTube light-box

  &#x20; 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

  &#x20; 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](https://1019271128-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLV-zTvL3gIREI2fwqd%2F-LLV00pz68a2T7F_RSXi%2F-LLV0ATAMbIsE0iZfOxC%2Flightbox%20Gallery.png?generation=1535987998774104\&alt=media)

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**\
&#x20;You can use any of the light-box types(i.e. image, video) in the gallery.