¿Cómo/dónde definir los valores predeterminados de fancybox?

Question

Digamos que este es mi FancyBox config:

$(".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 
    }); 

Pero, lo que me gustaría hacer, es definir de alguna manera la configuración como predeterminada FancyBox, por lo que, en consecuencia, cuando se unen a un elemento, sólo puedo hacer esto:

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

Y tendrá automáticamente mi configuración.

Answer 1

De acuerdo con la documentación aquí: http://fancybox.net/api

Puede pasar opciones como clave de objeto/valor a FancyBox() función o modificarlos en la parte inferior del archivo FancyBox JS

Answer 2

FancyBox tiene una conjunto interno de valores predeterminados que pueden anularse fácilmente.

Para FancyBox 1.3, utilice:

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

Para FancyBox 2.0, el ".Fn" se deja caer:

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

El FancyBox javascript necesita ser cargado primero, por supuesto archivo.

Answer 3

Puede usar JQuery Extend para combinar los contenidos de dos o más objetos juntos.

Aquí el 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 
}; 

continuación, puede utilizar luego directamente:

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

o fusionar/anularlos:

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

Más información: http://api.jquery.com/jQuery.extend/

Answer 4

Esta es la forma en que lo hago (según the latest (fancybox3) documentation):

  $.fancybox.defaults.clickOutside = 'close' 

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

Y así sucesivamente. Es decir, realmente no inicie nada, solo tengo mis elementos etiquetados data-fancybox="gallery" y uso el código anterior para establecer los valores predeterminados.