Light weight and fast image load jQuery to get best user experience
Jan 09, 21 DevGOD
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
Iframe
or
Ajax
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 */ $("a#single_image").fancybox(); /* Using custom settings */ $("a#inline").fancybox({ 'hideOnContentClick': true }); /* Apply fancybox to multiple items */ $("a.group").fancybox({ '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 */ $("a.grouped_elements").fancybox();