Skip to main content

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 Space 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>

Examples

Single image

Image Description
Image Description
Image Description 
              
                <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="Space 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-sm-4 mb-3">
                    <a class="js-fancybox u-media-viewer" href="javascript:;"
                       data-src="../../assets/img/1920x1080/img13.jpg"
                       data-caption="Space 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-sm-4 mb-3">
                    <a class="js-fancybox u-media-viewer" href="javascript:;"
                       data-src="../../assets/img/1920x1080/img14.jpg"
                       data-caption="Space 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>

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 btn-primary transition-3d-hover" href="javascript:;"
                   data-src="#fancyboxForm"
                   data-speed="700">
                  Open Form
                </a>

                <div id="fancyboxForm" class="clearfix" style="display: none; min-width: 400px;">
                  <form>
                    <!-- Title -->
                    <header class="text-center mb-7">
                      <h2 class="h4 mb-0">Welcome Back!</h2>
                      <p>Login to manage your account.</p>
                    </header>
                    <!-- End Title -->

                    <!-- Input -->
                    <div class="js-form-message mb-4">
                      <div class="js-focus-state input-group form">
                        <div class="input-group-prepend form__prepend">
                          <span class="input-group-text form__text">
                            <span class="fa fa-user form__text-inner"></span>
                          </span>
                        </div>
                        <input type="email" class="form-control form__input" name="email" required
                               placeholder="Email"
                               aria-label="Email"
                               data-msg="Please enter a valid email address."
                               data-error-class="u-has-error"
                               data-success-class="u-has-success">
                      </div>
                    </div>
                    <!-- End Input -->

                    <!-- Input -->
                    <div class="js-form-message mb-2">
                      <div class="js-focus-state input-group form">
                        <div class="input-group-prepend form__prepend">
                          <span class="input-group-text form__text">
                            <span class="fa fa-lock form__text-inner"></span>
                          </span>
                        </div>
                        <input type="password" class="form-control form__input" name="password" required
                               placeholder="Password"
                               aria-label="Password"
                               data-msg="Your password is invalid. Please try again."
                               data-error-class="u-has-error"
                               data-success-class="u-has-success">
                      </div>
                    </div>
                    <!-- End Input -->

                    <div class="clearfix mb-4">
                      <a class="js-animation-link float-right small u-link-muted" href="javascript:;"
                         data-target="#forgotPassword"
                         data-link-group="idForm"
                         data-animation-in="slideInUp">Forgot Password?</a>
                    </div>

                    <div class="mb-2">
                      <button type="submit" class="btn btn-block btn-primary btn-primary transition-3d-hover">Login</button>
                    </div>

                    <div class="text-center mb-4">
                      <span class="small text-muted">Do not have an account?</span>
                      <a class="js-animation-link small" href="javascript:;"
                         data-target="#signup"
                         data-link-group="idForm"
                         data-animation-in="slideInUp">Signup
                      </a>
                    </div>

                    <div class="text-center">
                      <span class="u-divider u-divider--xs u-divider--text mb-4">OR</span>
                    </div>

                    <!-- Login Buttons -->
                    <div class="d-flex">
                      <a class="btn btn-block btn-sm btn-facebook--air transition-3d-hover mr-1" href="#">
                        <span class="fab fa-facebook-square mr-1"></span>
                        Facebook
                      </a>
                      <a class="btn btn-block btn-sm btn-google--air transition-3d-hover ml-1 mt-0" href="#">
                        <span class="fab fa-google mr-1"></span>
                        Google
                      </a>
                    </div>
                    <!-- End Login Buttons -->
                  </form>
                </div>
                <!-- End Fancybox Form -->

                <!-- Video -->
                <a class="js-fancybox btn btn-sm btn-primary 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 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 -->

With multiple inner images

Multiple inner (hidden) images within slideshow.

Image Description
Image Description
Image Description +3 photos 
              
                <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="Space 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-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="Space 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-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="Space 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-20 font-weight-bold">+3 photos</span>
                      </span>
                    </a>
                  </div>
                </div>

                <img class="js-fancybox d-none"
                     data-fancybox="fancyboxGallery6"
                     data-src="../assets/img/img44-lg.jpg"
                     data-caption="Space in frames - image #04"
                     data-speed="700">
                <img class="js-fancybox d-none"
                     data-caption="Space in frames - image #05"
                     data-src="../assets/img/img45-lg.jpg"
                     data-fancybox="fancyboxGallery6"
                     data-speed="700">
                <img class="js-fancybox d-none"
                     data-fancybox="fancyboxGallery6"
                     data-src="../assets/img/img46-lg.jpg"
                     data-caption="Space in frames - image #06"
                     data-speed="700">

With multiple inner videos

Multiple inner (hidden) videos within slideshow.

Image Description +2 videos 
              
                <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="fa 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).