Go Back

Light weight and fast image load jQuery to get best user experience

Jan 09, 21 DevGOD
Light weight and fast image load jQuery to get best user experience

FancyBox is a library for displaying images, html content & media in a Mac-style "lightbox" that floats of web page.

·         Why we need this jQuery?

o   The most of jQuery is used to load fast on web page that is reason the page load fast in web browser to get better experience for user.

o   jQuery is client-side call so data will load after the DOM completes.

o   Fancybox is help to view with good presentation and visualize the images on web pages



How to use?

1. First, make sure you are using valid DOCTYPE

This is required for FancyBox to look and function correctly.

2. Include necessary JS files

Loading jQuery from CDN (Content Delivery Network) is recommended


Optional - Add transitions as jQuery by default supports only "swing" and "linear"

Optional - Enable "mouse-wheel" to navigate throught gallery items

3. Add FancyBox CSS file

Don`t forget to change background image paths if CSS file is not in the same directory.

Also, check src paths for AlphaImageLoader as they are relative to the HTML document, while regular CSS background images are relative to the CSS document (read more).


4. Create a link element ()


Inline content

Lorem ipsum dolor sit amet, consectetur adipiscing elit.




Optional - Use the title attribute for anchors if you want to show a caption


Note - You may want to set hideOnContentClick to false if you display iframed or inline content and it containts clickable elements (for example - play buttons for movies, links to other pages)


5. Fire plugin using jQuery selector

If you are not familiar with jQuery, please, read this tutorial for beginners

Sample examples:

$(document).ready(function() {
               /* This is basic - uses default settings */
                              /* Using custom settings */
                                    'hideOnContentClick': true
               /* Apply fancybox to multiple items */
                                    'transitionIn'               :                   'elastic',
                                    'transitionOut'            :                   'elastic',
                                    'speedIn'                       :                   600,
                                    'speedOut'                                       :                   200,
                                    'overlayShow'             :                   false

Note - ID's are meant for a SINGLE instance. If you want to use the same script for all your images/elements then use classes instead.

Note - Galleries are created from elements who have the same "rel" tag, example:


/* HTML */
 /* This will create two galleries */          



Data Source: