Fancybox

JavaScript lightbox library for presenting various types of media. Responsive, touch-enabled and customizable.

Official Documentation

Please Note: we already added plugin CSS and JS file in vendors.bundle.{css/js}. you can exclude it by using gulp task. you also can add them manually if you want.

How it works

data-fancybox initialize the Fancybox. Create links like: 

<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>
<a data-fancybox="gallery" href="big_2.jpg"><img src="small_2.jpg"></a>

Images

By default, fancybox fully preloads an image before displaying it. You can choose to display the image right away. It will render and show the full size image while the data is being received.

Rocky mountain under blue and white sky
Photo by Guillaume Briard
Vaihingen an der Enz, Germany
Photo by Oliver Roos
Closeup photo of world globe
Photo by chuttersnap
Blessed are the curious, for they shall have adventures. 🚩
Photo by Andrew Neel
Man holding pair of ski poles in front of trees
Photo by Oziel Gómez
Aerial photo of person using paddleboard
Photo by Ishan @seefromthesky
Car on curve road surrounded by trees
Photo by Grant Porter

Various

Display HTML elements, web pages, video, google maps and also load content via AJAX with ease. You can mix images, videos and any HTML content in each gallery.

Hidden HTML element

Open demo

Custom design and open/close animation

Open demo

Modal window

Open demo 

<div class="card-deck">
<!--  #1 -->
<div class="card" style="background: #f1ecec;">
  <div class="card-body">
    <p class="card-text">
      Hidden HTML element
    </p>
    <p class="mb-0">
      <a data-fancybox="hello" data-src="#hello" href="javascript:;"
        class="btn btn-primary btn-pill btn-sm">
        Open demo
      </a>
    </p>
  </div>
</div>
<form id="hello" action="" method="post" style="display: none; width: 100%; max-width: 660px;"
  class="">
  <h2 class="mb-3">
    Hello!
  </h2>
  <p>
    The first focusable element in the modal gets the focus for better accessibility.
    <br>
    The script traps focus within the modal to disable the user to access the content behind it.

    Focus is restored to last focused element when modal closes.
  </p>
  <p>
    <input type="text" value="" name="hi1" class="form-control" placeholder="Example input">
  </p>
  <p>
    <input type="text" value="" name="hi2" class="form-control" placeholder="Another input">
  </p>
  <p class="mb-0 text-right">
    <input data-fancybox-close="" type="button" class="btn btn-primary" value="Submit">
  </p>
</form>

<!--  #2 -->
<div class="card" style="background: #f1ecec;">
  <div class="card-body">
    <p class="card-text">
      Custom design and open/close animation
    </p>
    <p class="mb-0">
      <a data-fancybox="" data-animation-duration="500" data-src="#animatedModal"
        href="javascript:;" class="btn btn-primary btn-sm btn-pill">Open demo</a>
    </p>
  </div>
</div>
<div style="display: none;" id="animatedModal" class="animated-modal text-center p-5">
  <h2>
    Success!
  </h2>
  <p>
    That thing that you were trying to do worked.<br>
  </p>
  <p class="mb-0">
    <svg width="150" height="150" viewBox="0 0 510 510" xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink">
      <path fill="#fff"
        d="M150.45,206.55l-35.7,35.7L229.5,357l255-255l-35.7-35.7L229.5,285.6L150.45,206.55z M459,255c0,112.2-91.8,204-204,204 S51,367.2,51,255S142.8,51,255,51c20.4,0,38.25,2.55,56.1,7.65l40.801-40.8C321.3,7.65,288.15,0,255,0C114.75,0,0,114.75,0,255 s114.75,255,255,255s255-114.75,255-255H459z">
      </path>
    </svg>
  </p>
</div>
<style>
  /* Start state */
  .animated-modal {
    max-width: 550px;
    border-radius: 4px;
    overflow: hidden;
    background: linear-gradient(45deg, #543093 32%, #d960ae 100%);

    transform: translateY(-80px);
    transition: all .5s;
    /* Should match `data-animation-duration` parameter */
  }

  .animated-modal * {
    color: #fff;
  }

  .animated-modal h2,
  .animated-modal p {
    transform: translateY(-40px);
    opacity: 0;

    transition-property: transform, opacity;
    transition-duration: .3s;
  }

  /* Final state */
  .fancybox-slide--current .animated-modal,
  .fancybox-slide--current .animated-modal h2,
  .fancybox-slide--current .animated-modal p {
    transform: translateY(0);
    opacity: 1;

    transition-duration: .3s;
  }

  /* Reveal content with different delays */
  .fancybox-slide--current .animated-modal h2 {
    transition-delay: .1s;
  }

  .fancybox-slide--current .animated-modal p {
    transition-delay: .4s;
  }

  .fancybox-slide--current .animated-modal p:first-of-type {
    transition-delay: .2s;
  }
</style>

<!--  #3 -->
<div class="card p-lg-3" style="background: #f1ecec;">
  <div class="card-body">
    <p class="card-text">
      Modal window
    </p>
    <p class="mb-0">
      <a data-fancybox="" data-src="#trueModal" data-modal="true" href="javascript:;"
        class="btn btn-primary btn-pill btn-sm">Open demo</a>
    </p>
  </div>
</div>
<div id="trueModal" class="rounded p-5" style="display: none; max-width:600px;">
  <h2>
    I'm a modal!
  </h2>
  <p>
    You can close me only by pressing custom button below.
  </p>
  <p>
    It would also be possible to prevent closing using <code>beforeClose</code> callback.
  </p>
  <p>
    <button data-fancybox-close="trueModal" class="btn btn-primary btn-pill btn-sm">Close
      me</button>
  </p>
</div>

</div>

Video Media

YouTube & Vimeo videos can be used with fancybox by just providing the page URL. Integrated HTML5 video player will play MP4 videos using a browser's native video capabilities.

Videos are responsive and will always fit within the window while maintaining correct aspect ratio.

Default settings of YouTube video

Vimeo video with custom aspect ratio (2/1)

Display Google map 

<div class="card-deck mb-sm-4 video-deck">

<div class="card" style="background: #f1ecec;">
  <a data-fancybox="" href="https://www.youtube.com/watch?v=_sI_Ps7JSEk">
    <img class="card-img-top img-fluid"
      src="https://img.youtube.com/vi/_sI_Ps7JSEk/mqdefault.jpg">
  </a>
  <div class="card-body">
    <p class="card-text">
      Default settings of YouTube video
    </p>
  </div>
</div>

<div class="card" style="background: #f1ecec;">
  <a data-fancybox="" data-ratio="2" href="https://vimeo.com/191947042">
    <img class="card-img-top img-fluid" src="https://i.vimeocdn.com/video/604514162_640.jpg">
  </a>
  <div class="card-body">
    <p class="card-text">
      Vimeo video with custom aspect ratio (2/1)
    </p>
  </div>
</div>

<div class="card" style="background: #f1ecec;">
  <a data-fancybox="" data-options="{&quot;iframe&quot; : {&quot;css&quot; : {&quot;width&quot; : &quot;80%&quot;, &quot;height&quot; : &quot;80%&quot;}}}" href="https://www.google.com/maps/search/?api=1&amp;query=centurylink+field">
    <img class="card-img-top img-fluid"
    src="https://images.unsplash.com/photo-1522072176817-41673f7f0ccc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=879&q=80">
  </a>

  <div class="card-body">
    <p class="card-text">
      Display Google map
    </p>
  </div>
</div>
</div>