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/@fancyapps/fancybox/dist/jquery.fancybox.min.css">
              
            

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

              
                <script src="./assets/vendor/@fancyapps/fancybox/dist/jquery.fancybox.min.js"></script>
              
            

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

              
              
            

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>
              
            

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>
                    
                  

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/include/fancybox-ajax.html",
                           "type": "ajax",
                           "speed": 700
                         }'>
                        Ajax
                      </a>
                      <!-- End Ajax -->
                    
                  

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/documentation/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/documentation/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/documentation/img26-lg.jpg"
                             data-caption="Front in frames - image #06">
                      </div>
                    
                  

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>
                    
                  

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>
                    
                  

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>
              
            

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
              
            

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