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 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.HSFancyBox.init('.js-fancybox');
                });
              </script>

Examples

Single image 

                  
                    <div class="row">
                      <div class="col-sm-4 mb-3">
                        <a class="js-fancybox u-media-viewer" href="javascript:;"
                           data-src="../../assets/img/1920x1080/img10.jpg"
                           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="fas fa-plus u-media-viewer__icon-inner"></span>
                            </span>
                          </span>
                        </a>
                      </div>

                      <div class="col-sm-4 mb-3">
                        <a class="js-fancybox u-media-viewer" href="javascript:;"
                           data-src="../../assets/img/1920x1080/img13.jpg"
                           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="fas fa-plus u-media-viewer__icon-inner"></span>
                            </span>
                          </span>
                        </a>
                      </div>

                      <div class="col-sm-4 mb-3">
                        <a class="js-fancybox u-media-viewer" href="javascript:;"
                           data-src="../../assets/img/1920x1080/img14.jpg"
                           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="fas fa-plus u-media-viewer__icon-inner"></span>
                            </span>
                          </span>
                        </a>
                      </div>
                    </div>

Fancybox types

Script uses the data-fancybox-group="" attribute of the matched elements to obtain the location of the content and to figure out content type you want to display. Use title="" or data-caption="" attribute to specify item caption.

Open Form Open Video Ajax 
                  
                    <!-- Fancybox Form -->
                    <a class="js-fancybox btn btn-sm btn-primary transition-3d-hover" href="javascript:;"
                       data-src="#fancyboxForm"
                       data-speed="700">
                      Open Form
                    </a>
                    <!-- End Fancybox Form -->

                    <!-- Form -->
                    <div id="fancyboxForm" class="clearfix" style="display: none; min-width: 400px;">
                      <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>
                    <!-- End Form -->

                    <!-- Video -->
                    <a class="js-fancybox btn btn-sm btn-primary transition-3d-hover" href="javascript:;"
                       data-src="//www.youtube.com/embed/BNpiwOkKIJ8?autoplay=0"
                       data-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-type="ajax"
                       data-src="../assets/include/ajax/fancybox/ajax.html"
                       data-filter="#one"
                       data-speed="700">
                      Ajax
                    </a>
                    <!-- End Ajax -->

Multiple inner images

Multiple inner (hidden) images within slideshow.

                  
                    <div class="row">
                      <div class="col-sm-4 mb-3">
                        <a class="js-fancybox u-media-viewer" href="javascript:;"
                           data-src="../../assets/img/1920x1080/img10.jpg"
                           data-fancybox="fancyboxGallery6"
                           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="fas fa-plus u-media-viewer__icon-inner"></span>
                            </span>
                          </span>
                        </a>
                      </div>

                      <div class="col-sm-4 mb-3">
                        <a class="js-fancybox u-media-viewer" href="javascript:;"
                           data-src="../../assets/img/1920x1080/img13.jpg"
                           data-fancybox="fancyboxGallery6"
                           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="fas fa-plus u-media-viewer__icon-inner"></span>
                            </span>
                          </span>
                        </a>
                      </div>

                      <div class="col-sm-4 mb-3">
                        <a class="js-fancybox u-media-viewer" href="javascript:;"
                           data-src="../../assets/img/1920x1080/img14.jpg"
                           data-fancybox="fancyboxGallery6"
                           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="text-dark font-size-2 font-weight-semi-bold">+3 photos</span>
                          </span>
                        </a>
                      </div>
                    </div>

                    <img class="js-fancybox d-none" alt="Image Description"
                         data-fancybox="fancyboxGallery6"
                         data-src="../assets/img/img81-lg.jpg"
                         data-caption="Front in frames - image #04"
                         data-speed="700">
                    <img class="js-fancybox d-none" alt="Image Description"
                         data-caption="Front in frames - image #05"
                         data-src="../assets/img/img82-lg.jpg"
                         data-fancybox="fancyboxGallery6"
                         data-speed="700">
                    <img class="js-fancybox d-none" alt="Image Description"
                         data-fancybox="fancyboxGallery6"
                         data-src="../assets/img/img83-lg.jpg"
                         data-caption="Front in frames - image #06"
                         data-speed="700">

Multiple inner videos

Multiple inner (hidden) images within slideshow.

                  
                    <div class="row">
                      <div class="col-sm-4 mb-3">
                        <a class="js-fancybox u-media-viewer" href="javascript:;"
                           data-src="../../assets/img/1920x1080/img10.jpg"
                           data-fancybox="fancyboxGallery7">
                          <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="fas fa-plus u-media-viewer__icon-inner"></span>
                            </span>
                          </span>
                        </a>
                      </div>
                    </div>

                    <iframe class="js-fancybox d-none"
                            data-src="//www.youtube.com/embed/vlDzYIIOYmM?autoplay=0"
                            data-fancybox="fancyboxGallery7"
                            data-type="iframe"></iframe>

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).