FancyBox

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

How to use?

Wrap any block in a parent element with an ID or class and add the same ID or the class in the JS init function of the plugin, include the data-src="" attribute to with the image which should be opened in a lightbox.

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

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

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-paste the following <script> near the end of your pages under JS Front to enable it.

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

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

            
              <script>
                $(document).on('ready', function () {
                  // initialization of popups
                  $.HSCore.components.HSPopup.init('.js-fancybox');
                });
              </script>

Basic example

Image Description
Image Description
Image Description 
              
                <div class="row">
                  <div class="col-4 mb-3">
                    <a class="js-fancybox u-media-viewer" href="javascript:;"
                       data-src="../../assets/img/1920x1080/img10.jpg"
                       data-fancybox="lightbox-gallery-hidden"
                       data-caption="Front in frames - image #01"
                       data-speed="700">
                      <img class="img-fluid rounded" src="../../assets/img/480x320/img2.jpg" alt="Image Description">

                      <span class="u-media-viewer__container">
                        <span class="u-media-viewer__icon">
                          <span class="fa fa-plus u-media-viewer__icon-inner"></span>
                        </span>
                      </span>
                    </a>
                  </div>

                  <div class="col-4 mb-3">
                    <a class="js-fancybox u-media-viewer" href="javascript:;"
                       data-src="../../assets/img/1920x1080/img13.jpg"
                       data-fancybox="lightbox-gallery-hidden"
                       data-caption="Front in frames - image #02"
                       data-speed="700">
                      <img class="img-fluid rounded" src="../../assets/img/480x320/img4.jpg" alt="Image Description">

                      <span class="u-media-viewer__container">
                        <span class="u-media-viewer__icon">
                          <span class="fa fa-plus u-media-viewer__icon-inner"></span>
                        </span>
                      </span>
                    </a>
                  </div>

                  <div class="col-4 mb-3">
                    <a class="js-fancybox u-media-viewer" href="javascript:;"
                       data-src="../../assets/img/1920x1080/img14.jpg"
                       data-fancybox="lightbox-gallery-hidden"
                       data-caption="Front in frames - image #03"
                       data-speed="700">
                      <img class="img-fluid rounded" src="../../assets/img/480x320/img5.jpg" alt="Image Description">

                      <span class="u-media-viewer__container">
                        <span class="u-media-viewer__icon">
                          <span class="fa fa-plus u-media-viewer__icon-inner"></span>
                        </span>
                      </span>
                    </a>
                  </div>
                </div>

JavaScript behavior

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-fancybox="".

Attribute Description

data-fancybox

 Defines a group of images united in one gallery.

data-caption

 The title of the image.

data-type

 The type of content that will be uploaded to the page. Valid values are:
  • inline - if true, loads the content from the hidden block whose ID is specified in the data-src attribute.
  • image - if true, loads the image, the path to which is specified in the attribute data-src or data-srcset.
  • iframe - if true, loads video, google maps, third-party players, etc., the path to which is specified in the data-src.
  • ajax - if true, loads the content from the file specified in the attribute data-src.

data-width

 You must specify the original width of the image, while loading the image, the quality improves as you download from the server. This effect of image loading can be seen on the Apple website.

data-height

 You must specify the initial height of the image, while loading the image, the quality improves as you download from the server. This effect of image loading can be seen on the Apple website.

data-src

 Path to the image, video, uploaded content or hidden block ID.

data-filter

 If data-type="" is set to ajax, the value of the attribute is passed the ID of a particular block from the page being paged, as a result only this block will be loaded, not the whole page.

data-options

 Transmits the object with the settings, which allows you to specify the standard plug-in settings in one attribute.

data-animate-in

 Appearing effect of the popup

data-animate-out

 Disappearing effect of the popup

data-speed

 Opening speed of the pop.

data-slideshow-speed

 The speed of the slide show inside the popup.

data-overlay-blur-bg

 Includes background blur effect.

data-overlay-bg

 Color of the overlay.

data-is-infinite

 If true, then turns on the function of infinite scrolling of the slides (in a loop).