FancyBox

FancyBox offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages.

FancyBox documentation

How to use?

Copy-paste the stylesheet <link> into your <head> to load the CSS.

<link rel="stylesheet" href="../../assets/vendor/fancybox/jquery.fancybox.css">
Copy

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

<script src="../../assets/vendor/fancybox/jquery.fancybox.min.js"></script>
Copy

Copy-paste the following <script> near the end of your pages under JS Front to enable it.

<script src="../../assets/js/hs.fancybox.js"></script>
Copy

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

<script>
  $(document).on('ready', function () {
    // initialization of fancybox
    $('.js-fancybox').each(function () {
      var fancybox = $.HSCore.components.HSFancyBox.init($(this));
    });
  });
</script>
Copy

Examples

Single image 

<div class="row">
  <div class="col-sm-4 mb-3">
    <a class="js-fancybox media-viewer" href="javascript:;"
       data-hs-fancybox-options='{
         "speed": 700
       }'
       data-src="..."
       data-caption="Front in frames - image #01">
      <img class="img-fluid rounded" src="..." alt="Image Description">

      <span class="media-viewer-container">
        <span class="media-viewer-icon">
          <i class="fas fa-plus"></i>
        </span>
      </span>
    </a>
  </div>

  <div class="col-sm-4 mb-3">
    <a class="js-fancybox media-viewer" href="javascript:;"
       data-hs-fancybox-options='{
         "speed": 700
       }'
       data-src="..."
       data-caption="Front in frames - image #02">
      <img class="img-fluid rounded" src="..." alt="Image Description">

      <span class="media-viewer-container">
        <span class="media-viewer-icon">
          <i class="fas fa-plus"></i>
        </span>
      </span>
    </a>
  </div>

  <div class="col-sm-4 mb-3">
    <a class="js-fancybox media-viewer" href="javascript:;"
       data-hs-fancybox-options='{
         "speed": 700
       }'
       data-src="..."
       data-caption="Front in frames - image #03">
      <img class="img-fluid rounded" src="..." alt="Image Description">

      <span class="media-viewer-container">
        <span class="media-viewer-icon">
          <i class="fas fa-plus"></i>
        </span>
      </span>
    </a>
  </div>
</div>
Copy

Gallery

Galleries are created from elements which have the same ID and class "selector": "#fancyboxGallery1 .js-fancybox", attribute value.

<div id="fancyboxGallery1" class="row">
  <div class="col-sm-4 mb-3">
    <a class="js-fancybox media-viewer" href="javascript:;"
       data-hs-fancybox-options='{
         "selector": "#fancyboxGallery1 .js-fancybox",
         "speed": 700
       }'
       data-src="..."
       data-caption="Front in frames - image #01">
      <img class="img-fluid rounded" src="..." alt="Image Description">

      <span class="media-viewer-container">
        <span class="media-viewer-icon">
          <i class="fas fa-plus media-viewer-icon-inner"></i>
        </span>
      </span>
    </a>
  </div>

  <div class="col-sm-4 mb-3">
    <a class="js-fancybox media-viewer" href="javascript:;"
       data-hs-fancybox-options='{
         "selector": "#fancyboxGallery1 .js-fancybox",
         "speed": 700
       }'
       data-src="..."
       data-caption="Front in frames - image #02">
      <img class="img-fluid rounded" src="..." alt="Image Description">

      <span class="media-viewer-container">
        <span class="media-viewer-icon">
          <i class="fas fa-plus media-viewer-icon-inner"></i>
        </span>
      </span>
    </a>
  </div>

  <div class="col-sm-4 mb-3">
    <a class="js-fancybox media-viewer" href="javascript:;"
       data-hs-fancybox-options='{
         "selector": "#fancyboxGallery1 .js-fancybox",
         "speed": 700
       }'
       data-src="..."
       data-caption="Front in frames - image #03">
      <img class="img-fluid rounded" src="..." alt="Image Description">

      <span class="media-viewer-container">
        <span class="media-viewer-icon">
          <i class="fas fa-plus media-viewer-icon-inner"></i>
        </span>
      </span>
    </a>
  </div>
</div>
Copy

Enable infinity slideshow with "loop": true helper.

<div id="fancyboxGallery2" class="row">
  <div class="col-sm-4 mb-3">
    <a class="js-fancybox media-viewer" href="javascript:;"
       data-hs-fancybox-options='{
         "selector": "#fancyboxGallery2 .js-fancybox",
         "speed": 700,
         "loop": true
       }'
       data-src="..."
       data-caption="Front in frames - image #01">
      <img class="img-fluid rounded" src="..." alt="Image Description">

      <span class="media-viewer-container">
        <span class="media-viewer-icon">
          <i class="fas fa-plus media-viewer-icon-inner"></i>
        </span>
      </span>
    </a>
  </div>

  <div class="col-sm-4 mb-3">
    <a class="js-fancybox media-viewer" href="javascript:;"
       data-hs-fancybox-options='{
         "selector": "#fancyboxGallery2 .js-fancybox",
         "speed": 700,
         "loop": true
       }'
       data-src="..."
       data-caption="Front in frames - image #02">
      <img class="img-fluid rounded" src="..." alt="Image Description">

      <span class="media-viewer-container">
        <span class="media-viewer-icon">
          <i class="fas fa-plus media-viewer-icon-inner"></i>
        </span>
      </span>
    </a>
  </div>

  <div class="col-sm-4 mb-3">
    <a class="js-fancybox media-viewer" href="javascript:;"
       data-hs-fancybox-options='{
         "selector": "#fancyboxGallery2 .js-fancybox",
         "speed": 700,
         "loop": true
       }'
       data-src="..."
       data-caption="Front in frames - image #03">
      <img class="img-fluid rounded" src="..." alt="Image Description">

      <span class="media-viewer-container">
        <span class="media-viewer-icon">
          <i class="fas fa-plus media-viewer-icon-inner"></i>
        </span>
      </span>
    </a>
  </div>
</div>
Copy

There is a built-in "overlayBg": "rgba(color, .opacityValue)" helper. Set your custom option.

<div class="row">
  <div class="col-sm-4 mb-3">
    <a class="js-fancybox media-viewer" href="javascript:;"
       data-hs-fancybox-options='{
         "overlayBg": "rgba(255, 255, 255, .9)"
       }'
       data-src="assets/img/img21-lg.jpg"
       data-caption="Front in frames - image #01">
      <img class="img-fluid rounded" src="..." alt="Image Description">

      <span class="media-viewer-container">
        <span class="media-viewer-icon">
          <i class="fas fa-plus media-viewer-icon-inner"></i>
        </span>
      </span>
    </a>
  </div>

  <div class="col-sm-4 mb-3">
    <a class="js-fancybox media-viewer" href="javascript:;"
       data-hs-fancybox-options='{
         "overlayBg": "rgba(0, 0, 0, .9)"
       }'
       data-src="assets/img/img22-lg.jpg"
       data-caption="Front in frames - image #02">
      <img class="img-fluid rounded" src="..." alt="Image Description">

      <span class="media-viewer-container">
        <span class="media-viewer-icon">
          <i class="fas fa-plus media-viewer-icon-inner"></i>
        </span>
      </span>
    </a>
  </div>

  <div class="col-sm-4 mb-3">
    <a class="js-fancybox media-viewer" href="javascript:;"
       data-hs-fancybox-options='{
         "overlayBg": "rgba(255, 255, 255, .3)"
       }'
       data-src="assets/img/img23-lg.jpg"
       data-caption="Front in frames - image #03">
      <img class="img-fluid rounded" src="..." alt="Image Description">

      <span class="media-viewer-container">
        <span class="media-viewer-icon">
          <i class="fas fa-plus media-viewer-icon-inner"></i>
        </span>
      </span>
    </a>
  </div>
</div>
Copy

Or you can apply "overlayBlurBg": true helper.

<div class="row">
  <div class="col-sm-4 mb-3">
    <a class="js-fancybox media-viewer" href="javascript:;"
       data-hs-fancybox-options='{
         "overlayBlurBg": true,
         "speed": 700,
         "loop": true
       }'
       data-src="..."
       data-caption="Front in frames - image #01">
      <img class="img-fluid rounded" src="..." alt="Image Description">

      <span class="media-viewer-container">
        <span class="media-viewer-icon">
          <i class="fas fa-plus media-viewer-icon-inner"></i>
        </span>
      </span>
    </a>
  </div>

  <div class="col-sm-4 mb-3">
    <a class="js-fancybox media-viewer" href="javascript:;"
       data-hs-fancybox-options='{
         "overlayBlurBg": true,
         "speed": 700,
         "loop": true
       }'
       data-src="..."
       data-caption="Front in frames - image #02">
      <img class="img-fluid rounded" src="..." alt="Image Description">

      <span class="media-viewer-container">
        <span class="media-viewer-icon">
          <i class="fas fa-plus media-viewer-icon-inner"></i>
        </span>
      </span>
    </a>
  </div>

  <div class="col-sm-4 mb-3">
    <a class="js-fancybox media-viewer" href="javascript:;"
       data-hs-fancybox-options='{
         "overlayBlurBg": true,
         "speed": 700,
         "loop": true
       }'
       data-src="..."
       data-caption="Front in frames - image #03">
      <img class="img-fluid rounded" src="..." alt="Image Description">

      <span class="media-viewer-container">
        <span class="media-viewer-icon">
          <i class="fas fa-plus media-viewer-icon-inner"></i>
        </span>
      </span>
    </a>
  </div>
</div>
Copy

Also control the the popup opening, autoplay and the slideshow speed with "slideShow": { "autoStart": true, "speed": 5000 } helpers.

<div id="fancyboxGallery4" class="row">
  <div class="col-sm-4 mb-3">
    <a class="js-fancybox media-viewer" href="javascript:;"
       data-hs-fancybox-options='{
         "selector": "#fancyboxGallery4 .js-fancybox",
         "speed": 700,
         "loop": true,
         "slideShow": {
            "autoStart": true,
            "speed": 5000
         }
       }'
       data-src="..."
       data-caption="Front in frames - image #01">
      <img class="img-fluid rounded" src="..." alt="Image Description">

      <span class="media-viewer-container">
        <span class="media-viewer-icon">
          <i class="fas fa-plus media-viewer-icon-inner"></i>
        </span>
      </span>
    </a>
  </div>

  <div class="col-sm-4 mb-3">
    <a class="js-fancybox media-viewer" href="javascript:;"
       data-hs-fancybox-options='{
         "selector": "#fancyboxGallery4 .js-fancybox",
         "speed": 700,
         "loop": true,
         "slideShow": {
            "autoStart": true,
            "speed": 5000
         }
       }'
       data-src="..."
       data-caption="Front in frames - image #02">
      <img class="img-fluid rounded" src="..." alt="Image Description">

      <span class="media-viewer-container">
        <span class="media-viewer-icon">
          <i class="fas fa-plus media-viewer-icon-inner"></i>
        </span>
      </span>
    </a>
  </div>

  <div class="col-sm-4 mb-3">
    <a class="js-fancybox media-viewer" href="javascript:;"
       data-hs-fancybox-options='{
         "selector": "#fancyboxGallery4 .js-fancybox",
         "speed": 700,
         "loop": true,
         "slideShow": {
            "autoStart": true,
            "speed": 5000
         }
       }'
       data-src="..."
       data-caption="Front in frames - image #03">
      <img class="img-fluid rounded" src="..." alt="Image Description">

      <span class="media-viewer-container">
        <span class="media-viewer-icon">
          <i class="fas fa-plus media-viewer-icon-inner"></i>
        </span>
      </span>
    </a>
  </div>
</div>
Copy

Fancybox types

Script uses the "src": "" attribute of the matched elements to obtain the location of the content and to figure out content type you want to display.

Open Video Ajax 
<!-- Fancybox Form -->
<button type="button" class="btn btn-sm btn-primary transition-3d-hover" data-toggle="modal" data-target="#fancyboxForm">
  Open Form
</button>
<!-- End Fancybox Form -->

<!-- Form -->
<div class="modal fade" id="fancyboxForm" tabindex="-1" role="dialog" aria-labelledby="fancyboxFormlTitle" aria-hidden="true">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <!-- Header -->
      <div class="modal-header">
        <h4 id="fancyboxFormlTitle" class="mb-0">Form modal</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <svg aria-hidden="true" class="mb-0" width="14" height="14" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
            <path fill="currentColor" d="M11.5,9.5l5-5c0.2-0.2,0.2-0.6-0.1-0.9l-1-1c-0.3-0.3-0.7-0.3-0.9-0.1l-5,5l-5-5C4.3,2.3,3.9,2.4,3.6,2.6l-1,1 C2.4,3.9,2.3,4.3,2.5,4.5l5,5l-5,5c-0.2,0.2-0.2,0.6,0.1,0.9l1,1c0.3,0.3,0.7,0.3,0.9,0.1l5-5l5,5c0.2,0.2,0.6,0.2,0.9-0.1l1-1 c0.3-0.3,0.3-0.7,0.1-0.9L11.5,9.5z"/>
          </svg>
        </button>
      </div>
      <!-- End Header -->

      <!-- Body -->
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="exampleInputEmail1">Email address</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
          </div>
          <div class="form-group">
            <label for="exampleInputPassword1">Password</label>
            <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
          </div>
          <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">Check me out</label>
          </div>
          <button type="submit" class="btn btn-primary">Submit</button>
        </form>
      </div>
    </div>
  </div>
</div>
<!-- End Form -->

<!-- Video -->
<a class="js-fancybox btn btn-sm btn-primary transition-3d-hover" href="javascript:;"
   data-hs-fancybox-options='{
     "src": "//youtube.com/0qisGSwZym4",
     "speed": 700
   }'>
  Open Video
</a>
<!-- End Video -->

<!-- Ajax -->
<a class="js-fancybox fancybox.iframe btn btn-sm btn-primary transition-3d-hover" href="javascript:;"
   data-hs-fancybox-options='{
     "src": "assets/ajax/fancybox/ajax.html",
     "type": "ajax",
     "speed": 700
   }'>
  Ajax
</a>
<!-- End Ajax -->
Copy

Multiple inner images

Multiple inner (hidden) images within slideshow.

<div id="fancyboxGallery5">
  <div class="row">
    <div class="col-sm-4 mb-3">
      <a class="js-fancybox media-viewer" href="javascript:;"
         data-hs-fancybox-options='{
           "selector": "#fancyboxGallery5 .js-fancybox",
           "speed": 700
         }'
         data-src="..."
         data-caption="Front in frames - image #01">
        <img class="img-fluid rounded" src="..." alt="Image Description">

        <span class="media-viewer-container">
          <span class="media-viewer-icon">
            <i class="fas fa-plus media-viewer-icon-inner"></i>
          </span>
        </span>
      </a>
    </div>

    <div class="col-sm-4 mb-3">
      <a class="js-fancybox media-viewer" href="javascript:;"
         data-hs-fancybox-options='{
           "selector": "#fancyboxGallery5 .js-fancybox",
           "speed": 700
         }'
         data-src="..."
         data-caption="Front in frames - image #02">
        <img class="img-fluid rounded" src="..." alt="Image Description">

        <span class="media-viewer-container">
          <span class="media-viewer-icon">
            <i class="fas fa-plus media-viewer-icon-inner"></i>
          </span>
        </span>
      </a>
    </div>

    <div class="col-sm-4 mb-3">
      <a class="js-fancybox media-viewer" href="javascript:;"
         data-hs-fancybox-options='{
           "selector": "#fancyboxGallery5 .js-fancybox",
           "speed": 700
         }'
         data-src="..."
         data-caption="Front in frames - image #03">
        <img class="img-fluid rounded" src="..." alt="Image Description">

        <span class="media-viewer-container">
          <span class="media-viewer-icon media-viewer-icon-active">
            <span class="media-viewer-icon-inner">+3</span>
          </span>
        </span>
      </a>
    </div>
  </div>

  <img class="js-fancybox d-none" alt="Image Description"
       data-hs-fancybox-options='{
         "selector": "#fancyboxGallery5 .js-fancybox",
         "speed": 700
       }'
       data-src="assets/img/img24-lg.jpg"
       data-caption="Front in frames - image #04">
  <img class="js-fancybox d-none" alt="Image Description"
       data-hs-fancybox-options='{
         "selector": "#fancyboxGallery5 .js-fancybox",
         "speed": 700
       }'
       data-src="assets/img/img25-lg.jpg"
       data-caption="Front in frames - image #05">
  <img class="js-fancybox d-none" alt="Image Description"
       data-hs-fancybox-options='{
         "selector": "#fancyboxGallery5 .js-fancybox",
         "speed": 700
       }'
       data-src="assets/img/img26-lg.jpg"
       data-caption="Front in frames - image #06">
</div>
Copy

Multiple inner videos

Multiple inner (hidden) videos within slideshow.

<div id="fancyboxGallery6">
  <div class="row">
    <div class="col-sm-4 mb-3">
      <a class="js-fancybox media-viewer" href="javascript:;"
         data-hs-fancybox-options='{
           "selector": "#fancyboxGallery6 .js-fancybox",
           "speed": 700,
           "buttons": ["fullScreen", "close"],
           "media": {
             "youtube": {
               "params": {
                 "autoplay": 0
                }
              }
            }
           }'
           data-src="//youtube.com/0qisGSwZym4"
           data-caption="Front in frames - video #01">
        <img class="img-fluid rounded" src="..." alt="Image Description">

        <span class="media-viewer-container">
          <span class="media-viewer-icon">
            <span class="media-viewer-icon media-viewer-icon-active">
              <span class="media-viewer-icon-inner">+3</span>
            </span>
          </span>
        </span>
      </a>
    </div>
  </div>

  <iframe class="js-fancybox d-none"
          data-hs-fancybox-options='{
           "selector": "#fancyboxGallery6 .js-fancybox",
           "speed": 700,
           "buttons": ["fullScreen", "close"],
           "media": {
             "vimeo": {
               "params": {
                 "autoplay": 0
                }
              }
            }
           }'
           data-src="//vimeo.com/167434033"
           data-caption="Front in frames - video #02"></iframe>
</div>
Copy

Multiple inner videos (Autoplay)

Multiple inner (autoplay) videos within slideshow.

<div id="fancyboxGallery7">
  <div class="row">
    <div class="col-sm-4 mb-3">
      <a class="js-fancybox media-viewer" href="javascript:;"
         data-hs-fancybox-options='{
           "selector": "#fancyboxGallery7 .js-fancybox",
           "speed": 700,
           "buttons": ["fullScreen", "close"],
            "youtube": {
              "autoplay": 1
            }
           }'
           data-src="//youtube.com/0qisGSwZym4"
           data-caption="Front in frames - video #01">
        <img class="img-fluid rounded" src="..." alt="Image Description">

        <span class="media-viewer-container">
          <span class="media-viewer-icon">
            <span class="media-viewer-icon media-viewer-icon-active">
              <span class="media-viewer-icon-inner">+3</span>
            </span>
          </span>
        </span>
      </a>
    </div>
  </div>

  <iframe class="js-fancybox d-none"
          data-hs-fancybox-options='{
           "selector": "#fancyboxGallery7 .js-fancybox",
           "speed": 700,
           "buttons": ["fullScreen", "close"],
            "vimeo": {
              "autoplay": 1
            }
           }'
           data-src="//vimeo.com/167434033"
           data-caption="Front in frames - video #02"></iframe>
</div>
Copy

SCSS

SCSS-files of the component can be found here assets/scss/front/vendor/fancybox/

JavaScript behavior

Extend

By assigning a variable, you can call the standard methods of the plugin:

<script>
  $(document).on('ready', function () {
    // initialization of fancybox
    $('.js-fancybox').each(function () {
      var fancybox = $.HSCore.components.HSFancyBox.init($(this), {
        afterClose: function() {
          console.log('Closed!!!');
        }
      });
    });
  });
</script>
Copy

Attributes

By assigning a variable, you can call the standard methods of the plugin:

data-hs-fancybox-options='{
   ...

   // Custom
   "transitionEffectCustom": {
     "onShow": "fadeIn",
     "onHide": "fadeOut"
   },
   "overlayBg": "#ff0000",
   "overlayBlurBg": true
}' - array
Copy

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-fancybox-options='{}'. For more detailed or missing attributes/functions, see the official FancyBox documentation page.

Parameters Description

transitionEffectCustom.onShow

 Reveal effect

transitionEffectCustom.onHide

 Hide effect

overlayBg

 Overlay color

overlayBlurBg

 if true, then turns on the background blur effect