How / where to define fancybox defaults?

Question

Let's say this is my fancybox configuration:

$(".fancybox").fancybox({ 'transitionIn':'fade', 'transitionOut':'fade', 'speedIn':150, 'speedOut':150, 'changeSpeed':150, 'changeFade':150, 'overlayOpacity':0.1, 'overlayColor':'#000000', 'padding':0, 'margin':20, 'titleShow':false, 'centerOnScroll':true }); 

But what I would like to do is somehow define the configuration as fancybox by default, so therefore, when I bind an item, I can only do this:

$(".newElement").fancybox();

And it will automatically receive my configuration.

Answer 1

According to the documentation here: http://fancybox.net/api

You can pass parameters as a key / value object to the fancybox () function or change them at the bottom of the JS FancyBox file

Answer 2

Fancybox has an internal set of defaults that you can easily override.

For Fancybox 1.3 use:

 jQuery.extend(jQuery.fn.fancybox.defaults, { hideOnOverlayClick: false, // overlayOpacity: 0.75, // <-- just an example overlayColor: '#222' // }); 

For Fancybox 2.0, ".fn" is discarded:

 jQuery.extend(jQuery.fancybox.defaults, { type: 'ajax' // <-- for example }); 

Of course, the Fancybox javascript download file needs to be downloaded, of course.

Answer 3

You can use jQuery Extend to combine the contents of two or more objects together.

Here's the config:

 var fancyboxConfig = { 'transitionIn':'fade', 'transitionOut':'fade', 'speedIn':150, 'speedOut':150, 'changeSpeed':150, 'changeFade':150, 'overlayOpacity':0.1, 'overlayColor':'#000000', 'padding':0, 'margin':20, 'titleShow':false, 'centerOnScroll':true }; 

Then you can use it directly:

 $(".newElement").fancybox(fancyboxConfig); 

or merge / redefine them:

 $(".newElementNoEffect").fancybox( $.extend({}, fancyboxConfig, { openEffect: 'none', closeEffect: 'none', }) ); 

Additional information: http://api.jquery.com/jQuery.extend/

Answer 4

Here's how I do it (according to the latest (fancybox3) documentation ):

  $.fancybox.defaults.clickOutside = 'close' $.fancybox.defaults.slideShow = { autoStart : false, speed : myGallerySlideshowSpeed } 

And so on. That is, I really don’t initiate anything, I have just marked the data-fancybox="gallery" tags and use the code above to set the default values.