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="../node_modules/@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="../node_modules/@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.

              
                <script src="../assets/js/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 FANCYBOX
                    // =======================================================
                    $('.js-fancybox').each(function() {
                      var fancybox = $.HSCore.components.HSFancyBox.init($(this));
                    })
                  });
                </script>

Single image

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

Use "loop": true for infinity slideshow.

Slideshow speed

Control the slideshow speed with "slideShow": {"autoStart": true, "speed": 5000}. By default it's set to 2000ms.

Overlay backgrounds

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

Use "overlayBlurBg": true for blurred background.

Video

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.

Multiple inner images

Multiple inner (hidden) images within slideshow.

Multiple inner videos

Multiple inner (hidden) videos within slideshow.

Use "media": {"youtube": {"params": {"autoplay": 1 } } } to enable autoplaying videos.

Methods

Parameters Description

transitionEffectCustom.onShow

 Reveal effect

transitionEffectCustom.onHide

 Hide effect

overlayBg

 Overlay color

overlayBlurBg

 if true, then turns on the background blur effect