Lazy loading Fancybox

1,313 views
Skip to first unread message

Geert De Deckere

unread,
Dec 3, 2009, 8:43:29 AM12/3/09
to fancybox
Here is how I lazy load Fancybox. It will only load the Fancybox CSS
and javascript file if any Fancybox links are found. It works but code
improvements are always welcomed.


$(document).ready(function() {

// Cache your fancybox links selection
var $fancyboxes = $('a.fancybox');

// Lazy load lightbox files
if ($fancyboxes.length) {
// Load CSS
$('<link rel="stylesheet" type="text/css" href="./javascript/
fancybox/jquery.fancybox-1.2.6.css" media="screen" />')
.appendTo('head');
// Load Fancybox via ajax() (http://jamazon.co.uk/web/2008/07/21/
jquerygetscript-does-not-cache/)
$.ajax({
type: 'GET',
dataType: 'script',
url: './javascript/fancybox/jquery.fancybox-1.2.6.pack.js',
cache: true,
success: function() {
$fancyboxes.fancybox({
'showCloseButton': false,
'padding': 0,
'overlayOpacity': 0.7,
'overlayColor': '#000',
'zoomSpeedIn': 400,
'zoomSpeedOut': 200
});
}
});
}

});

Geert De Deckere

unread,
Dec 3, 2009, 8:46:25 AM12/3/09
to fancybox
Same code (without forced linebreaks): http://gist.github.com/248167
Reply all
Reply to author
Forward
0 new messages