I have the following existing function, used to load images in fancybox, but although the code works find in FF, in Chrome am getting an error (in the "firebug"-like tool), whereby under the "link.fancybox({..." code it shows "Uncaught TypeError: undefined is not a function".
The error does not happen everytime I try to open with fancybox thou, it sometimes shows up whereby clicking on a fancybox image does not load the original version of the image, and sometimes it opens the image correctly.

Anyone can help pls?
NOTE: I won't be able to provide any link to test since my dev server is not accessible outside the network am on.

function initLightbox() {

    jQuery('a.lightbox, a[rel*="lightbox"]').each(function() {

        var link = jQuery(this);

            padding: 0,
            cyclic: false,
            overlayShow: true,
            overlayOpacity: 0.65,
            overlayColor: '#000000',
            titlePosition: 'inside',                

            onStart: function() {               
            onClosed: function() {      
            onComplete: function(box) {             
                if(link.attr('href').indexOf('#') === 0) {
                    jQuery('#fancybox-content').find('a.close').unbind('click.fb').bind('click.fb', function(e){



I figured out there is an "async" with the script tag where it is calling the js. However, I was then told that this "async" was added for optimization of the website, and now I need to find an alternative way to solve this issue.
I tried with "defer" but it stopped loading the script altogether.
Any help on this?