ejemplos - colorbox jquery

cómo hacer que colorbox responda

Question

Estoy usando colorbox en un sitio web receptivo.

Tengo una solicitud: deseo que Colorbox se ajuste automáticamente al tamaño y la orientación de la pantalla / dispositivo móvil: si cambio la orientación de la pantalla / dispositivo móvil (es decir, si giro mi móvil para ajustar las imágenes verticales y horizontales al tamaño de la pantalla, deseo que Colorbor se ajuste automáticamente al nuevo tamaño / orientación de la pantalla). por ahora, Colorbox solo se ajusta automáticamente a la carga de una nueva imagen (en una presentación de diapositivas, por ejemplo).

Hice la pregunta en el grupo de google cerrado:

https://groups.google.com/group/colorbox/browse_thread/thread/85b8bb2d8cb0cc51?hl=fr

Creé dos solicitudes de funciones en github:

https://github.com/jackmoore/colorbox/issues/158

pero no tengo ninguna respuesta, así que pruebo en Stack Overflow ...

¿Alguien sabe si es posible hacer que ColorBox cambie el tamaño automáticamente en función del cambio de orientación (tal vez con una función de devolución de llamada en una solución alternativa)?

Gracias de antemano por cualquier ayuda.

Answer 1

Añádalo a su archivo js principal después de cargar el cuadro de color relacionado con los archivos js y jquery lib.

(function ($, window, document, undefined) {
//Configure colorbox call back to resize with custom dimensions 
  $.colorbox.settings.onLoad = function() {
    colorboxResize();
  }

  //Customize colorbox dimensions
  var colorboxResize = function(resize) {
    var width = "90%";
    var height = "90%";

if($(window).width() > 960) { width = "860" }
if($(window).height() > 700) { height = "630" } 

$.colorbox.settings.height = height;
$.colorbox.settings.width = width;

//if window is resized while lightbox open
if(resize) {
  $.colorbox.resize({
    ''height'': height,
    ''width'': width
      });
    } 
  }

    //In case of window being resized
  $(window).resize(function() {
    colorboxResize(true);
  });

})(jQuery, this, this.document);

Answer 2

Antes de colorbox js lock, inserte el siguiente código:

jQuery.colorbox.settings.maxWidth  = ''95%'';
jQuery.colorbox.settings.maxHeight = ''95%'';

var resizeTimer;
function resizeColorBox()
  {
      if (resizeTimer) clearTimeout(resizeTimer);
      resizeTimer = setTimeout(function() {
              if (jQuery(''#cboxOverlay'').is('':visible'')) {
                      jQuery.colorbox.load(true);
              }
      }, 300);
  }
jQuery(window).resize(resizeColorBox);
window.addEventListener("orientationchange", resizeColorBox, false);

Deje a la izquierda, derecha, abajo y arriba con el valor ''falso'' y hará el cálculo automáticamente. ¡Funcionó para mí así que voy a ir!

Answer 3

Debería considerar ''enmarcar'' con el archivo @media query colorBox css de la misma manera que lo haría con el resto de su CSS.

Answer 4

Esta es la solución que funcionó para mí, saqué el temporizador que originalmente fue publicado por Shabith.

    /**
     * Auto Re-Size function
     */
    function resizeColorBox()
    {
        if (jQuery(''#cboxOverlay'').is('':visible'')) {
            jQuery.colorbox.resize({width:''100%'', height:''100%''});
        }
    }

    // Resize Colorbox when resizing window or changing mobile device orientation
    jQuery(window).resize(resizeColorBox);
    window.addEventListener("orientationchange", resizeColorBox, false);

Créditos a: https://github.com/jackmoore/colorbox/issues/158

Answer 5

Este está trabajando adecuadamente hermanos.

jQuery( document ).ready( function(){
var custom_timeout = ( function() {
    var timers = {};
    return function ( callback, ms, uniqueId ) {
        if ( !uniqueId ) {
            uniqueId = "Don''t call this twice without a uniqueId";
        }
        if ( timers[uniqueId] ) {
            clearTimeout ( timers[uniqueId] );
        }
        timers[uniqueId] = setTimeout( callback, ms );
      };
})(); 
$(".group1").colorbox({rel:''group1'', width:"80%" }); 
$( window ).resize( function(){
    custom_timeout(function(){
        if( $(''#cboxOverlay'' ).css( ''visibility'' ) ){
            $(".group1").colorbox.resize({ innerWidth:''80%'' });
        }
    }, 500 );
}); 

});

Visita la página de demostración

Answer 6

He hecho esto en CSS para el cuadro de video de youtube, pero cuidado, podría cortar algunas imágenes verticales.

@media (max-width: 480px) {
#colorbox {
max-height:218px !important;
}
#cboxWrapper *, #cboxWrapper {
height:auto !important;
}
}

Answer 7

Intenté muchas de las soluciones aquí, pero lo siguiente de @berardig en github funcionó muy bien para mí

var cboxOptions = {
  width: ''95%'',
  height: ''95%'',
  maxWidth: ''960px'',
  maxHeight: ''960px'',
}

$(''.cbox-link'').colorbox(cboxOptions);

$(window).resize(function(){
    $.colorbox.resize({
      width: window.innerWidth > parseInt(cboxOptions.maxWidth) ? cboxOptions.maxWidth : cboxOptions.width,
      height: window.innerHeight > parseInt(cboxOptions.maxHeight) ? cboxOptions.maxHeight : cboxOptions.height
    });
});

Fuente: https://github.com/jackmoore/colorbox/issues/183#issuecomment-42039671

Answer 8

Llamar a esto en el cambio de tamaño de ventana y / o "orientacióncambiar" Donde 960 es el ancho preferido para mi colorbox, y mi maxWidth = 95%

var myWidth = 960, percentageWidth = .95;       
if ($(''#cboxOverlay'').is('':visible'')) {         
    $.colorbox.resize({ width: ( $(window).width() > ( myWidth+20) )? myWidth : Math.round( $(window).width()*percentageWidth ) });
    $(''.cboxPhoto'').css( {
        width: $(''#cboxLoadedContent'').innerWidth(),
        height: ''auto''
    });
    $(''#cboxLoadedContent'').height( $(''.cboxPhoto'').height() );
    $.colorbox.resize();

}

Answer 9

Lo resolví usando las opciones maxWidth y maxHeight en la inicialización de la caja de color, como se explica en el sitio web del desarrollador:

jQuery(*selector*).colorbox({maxWidth:''95%'', maxHeight:''95%''});

También puede agregar este fragmento para cambiar el tamaño del colorbox al cambiar el tamaño de la ventana o cambiar la orientación de su dispositivo móvil:

/* Colorbox resize function */
var resizeTimer;
function resizeColorBox()
{
    if (resizeTimer) clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
            if (jQuery(''#cboxOverlay'').is('':visible'')) {
                    jQuery.colorbox.load(true);
            }
    }, 300)
}

// Resize Colorbox when resizing window or changing mobile device orientation
jQuery(window).resize(resizeColorBox);
window.addEventListener("orientationchange", resizeColorBox, false);

Finalmente, reemplace jQuery por $ .

Answer 10

Me gustaría agregar una respuesta aquí. Tenía un requisito para hacer que el colorbox responda respetando diferentes anchuras de punto de interrupción y cambie el ancho del popover en función del ancho de la ventana. Básicamente, puedo permitirme tener espacios vacíos a la izquierda y derecha del cuadro de colores cuando se muestra en un navegador, pero no cuando se muestra en un teléfono / tableta.

He utilizado el concepto de respuesta de esta misma publicación ( https://.com/a/23431190/260665 ) pero hice algunas modificaciones:

/**
 * Raj: Used basic source from here: https://.com/a/23431190/260665
 **/

// Make sure the options are sorted in descending order of their breakpoint widths
var cboxDefaultOptions = 
        [   
            {
                breakpointMinWidth: 1024,
                values: {
                    width : ''70%'',
                    maxWidth : ''700px'',
                }
            },
            {
                breakpointMinWidth: 640,
                values: {
                    width : ''80%'',
                    maxWidth : ''500px'',
                }
            },
            {
                breakpointMinWidth: 320,
                values: {
                    width : ''95%'',
                    maxWidth : ''300px'',
                }
            }
        ];

$(window).resize(function(){
//  alert (JSON.stringify($.colorbox.responsiveOptions));
//  var respOpts = $.colorbox.attr(''responsiveOptions'');
    var respOpts = $.colorbox.responsiveOptions;
    if (respOpts) {
        var breakpointOptions = breakpointColorboxOptionsForWidth (window.innerWidth);
        if (breakpointOptions) {
            $.colorbox.resize({
                width: window.innerWidth > parseInt(breakpointOptions.values.maxWidth) ? breakpointOptions.values.maxWidth : breakpointOptions.values.width,
              });
        }
    }
});

function breakpointColorboxOptionsForWidth (inWidth) {
    var breakpointOptions = null;
    for (var i=0; i<cboxDefaultOptions.length; i++) {
        var anOption = cboxDefaultOptions[i];
        if (inWidth >= anOption.breakpointMinWidth) {
            breakpointOptions = anOption;
            break;
        }
    }
    return breakpointOptions;
}

Uso:

        $.colorbox.responsiveOptions = cboxDefaultOptions;

Cuando el objeto de colorbox está preparado, simplemente agregue este atributo adicional a él. También podemos configurar cboxDefaultOptions o suministrar un objeto valorado personalizado diferente a $.colorbox.responsiveOptions para que se cargue con diferentes puntos de corte si es necesario.

Answer 11

Mi solución, ayuda cuando el sitio web no responde y quiere que el colorbox sea visible en los dispositivos móviles. Yo personalmente lo uso para almacenar el formulario ReCaptcha, por lo que es obligatorio.

    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
        $.colorbox({reposition: true, top: 0, left: 0, transition: ''none'', speed:''50'', inline:true, href:"#contactus"}).fadeIn(100);
    } else {
        $.colorbox({width:"400px", height:"260px", transition: ''none'', speed:''50'', inline:true, href:"#contactus"}).fadeIn(100);
    }

Answer 12

Parece que este problema ha sido discutido y las soluciones de trabajo ofrecidas en github del autor

https://github.com/jackmoore/colorbox/issues/158

Answer 13

Respuesta del propietario de colorbox.

window.addEventListener("orientationchange", function() {
if($(''#cboxOverlay'').is('':visible''){
    $.colorbox.load(true);
}
}, false);

Answer 14

Una solución que encontré en el sitio de Drupal usa la función de apagado de Colorbox:

if (window.matchMedia) {
    // Establishing media check
    width700Check = window.matchMedia("(max-width: 700px)");
    if (width700Check.matches){
        $.colorbox.remove();
    }
}

Debería reiniciar el colorbox en un determinado tamaño de ventana.

Answer 15

en el archivo jquary.colorbox.js acaba de hacer abajo chnage

línea 24: -

maxWidth: "100%",

no hagas ningún otro cambio, todo funcionará bien con todo el efecto de respuesta :)