Lightbox changes not working

I am using default Light box and Jquery of Elgg 1.8. I want to implement login and register lightboxs on home page. I am able to archive it perfectly.  Now I want to change size of light box, which I know can be archived by this: 

$('.elgg-lightbox').fancybox({
         'width': '80%',
         'height': '80%',
         'type': 'ajax',
         'ajax': {
             dataFilter: function(data) {
                 return $(data).find('.elgg-body form');
             }
         }
     });

Now problem is, I am getting error : "$('.elgg-lightbox').fancybox is not a function".

So I tried to find if fancybox is loading correctly, using this :

if(typeof $.fancybox == 'function') {
    console.log("fancy box loaded");
} else {
    console.log("fancy box not loaded");
}

On page load, It echoed "fancy box loaded" but when I am clicking on login button I am getting "fancy box not loaded". and then getting above error : "$('.elgg-lightbox').fancybox is not a function".

So I am not able to understand why it is unloading it onclick. Any guidance will be helpful.

Beginning Developers

Beginning Developers

This space is for newcomers, who wish to build a new plugin or to customize an existing one to their liking