logo
shape

fancybox

jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.

fancybox documentation
Example
<a href="../assets/img/gallery/2.jpg" data-fancybox data-caption="Image caption">
  <img class="rounded w-100" src="../assets/img/gallery/2.jpg" alt="">
</a>
Gallery
<div class="row no-gutters">
  <div class="col-4 px-1"><a href="../assets/img/gallery/1.jpg" data-fancybox="gallery" data-caption="Image caption"><img class="rounded w-100" src="../assets/img/gallery/1.jpg" alt="" /></a></div>
  <div class="col-4 px-1"><a href="../assets/img/gallery/4.jpg" data-fancybox="gallery" data-caption="Image caption"><img class="rounded w-100" src="../assets/img/gallery/4.jpg" alt="" /></a></div>
  <div class="col-4 px-1"><a href="../assets/img/gallery/3.jpg" data-fancybox="gallery" data-caption="Image caption"><img class="rounded w-100" src="../assets/img/gallery/3.jpg" alt="" /></a></div>
</div>
Video

Direct link to YouTube

<div class="card">
  <a href="https://www.youtube.com/watch?v=5EdNeHSiUTc" data-fancybox="" data-animation-effect="zoom-in-out" data-animation-duration="600">
    <img class="card-img-top img-fluid" src="https://img.youtube.com/vi/5EdNeHSiUTc/maxresdefault.jpg" alt="">
    <div class="col-auto absolute-centered">
      <div class="media align-items-center media-player-hover">
        <div class="raven-round-button-success bg-light"><span class="fa fa-play fs--1 icon"></span></div>
      </div>
    </div>
  </a>
  <div class="card-body">
    <p class="card-text">Direct link to YouTube</p>
  </div>
</div>
Stylesheet
<link href="assets/lib/fancybox/jquery.fancybox.min.css" rel="stylesheet">
Javascript
<script src="assets/lib/fancybox/jquery.fancybox.min.js"></script>
About
Account
Resources

Get latest news
in your box!

Get Special Offers & Deals. We Never Spam.

Made With By ThemeWagon