Media

  1. Image
  2. Video
  3. Lightbox

Image

You can add a shadow around your images by adding .img-shadow class to the img tag.

shadowed image 

<img class="img-shadow img-responsive center-block" src="assets/img/placeholder.png" alt="shadowed image">


Use figcaption tag to add a caption to your images.

image test
some description about the image

<figure>
  <img src="assets/img/placeholder.png" alt="image test">
  <figcaption>some description about the image</figcaption>
</figure>
image
image
image 

<img class="img-responsive img-rounded" src="assets/img/placeholder.png" alt="image">
<img class="img-responsive img-circle" src="assets/img/placeholder.png" alt="image">
<img class="img-responsive img-thumbnail" src="assets/img/placeholder.png" alt="image">

Video

Adding a video to your page from any source. Just wrap them inside .video class.

YouTube


<div class="video">Embed code</div>

Vimeo


<div class="video">Embed code</div>

Self-hosted

Don't forget to add width="100%" and height="100%" attributes.


<div class="video">
  <video src="path/to/video.mp4" width="100%" height="100%" controls>
</div>

Implementing as easy as adding a data-lity attribute to your <a> tags.

Image iFrame Youtube iFrame Vimeo Google Maps

Here's the code to generate above buttons. You can use an <img> tag to show a poster image as well.


<a class="btn btn-default" href="assets/img/index.png" data-lity>Image</a>
<a class="btn btn-default" href="//www.youtube.com/watch?v=hQfNtnKm5nA" data-lity>iFrame Youtube</a>
<a class="btn btn-default" href="//vimeo.com/127738920" data-lity>iFrame Vimeo</a>
<a class="btn btn-default" href="//maps.google.com/maps?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA" data-lity>Google Maps</a>