come rendere colorbox responsive

Question

Sto utilizzando colorbox in un sito Web reattivo.

Ho una richiesta: desidero che Colorbox si adatti automaticamente alle dimensioni e all'orientamento dello schermo/dispositivo mobile: se cambio l'orientamento dello schermo/dispositivo mobile (cioè se ruoto il mio cellulare per regolare orizzontale e immagini vertivali alle dimensioni dello schermo, vorrei che Colorbor si adatti automaticamente alla nuova dimensione/orientamento dello schermo). per ora, Colorbox si adatta automaticamente solo al caricamento di una nuova immagine (in una presentazione per esempio).

ho posto la domanda nel gruppo google chiuso:

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

ho creato due richieste di funzionalità su GitHub:

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

ma non ho alcuna risposta, così Provo su Stack Overflow ...

Qualcuno sa se è possibile ottenere ColorBox per auto- ridimensionamento basato su sul cambiamento di orientamento (magari con una funzione di callback in una soluzione alternativa)?

Grazie in anticipo a qualsiasi aiuto.

Answer 1

Si dovrebbe considerare 'framing' con @media query colorBox css file nello stesso modo in cui si farebbe con il resto del proprio css.

Answer 2

Sembra che questo problema è stato discusso e soluzioni di lavoro offerto su github dell'autore

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

Answer 3

Una soluzione che ho trovato sul Drupal site utilizza la funzione OFF di Colorbox:

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

Si avrebbe bisogno per riavviare Colorbox su una determinata dimensione della finestra.

Answer 4

La mia soluzione aiuta quando il sito Web non è reattivo e si desidera che il colorbox sia visibile sui dispositivi mobili. Io personalmente lo uso per memorizzare il modulo di reCaptcha, quindi è obbligatorio.

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 5

ho risolto utilizzando il maxwidth e maxHeight opzioni di inizializzazione colorbox, come spiegato sul sito dello sviluppatore:

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

È inoltre possibile aggiungere questo frammento di codice per ridimensionare la colorbox durante il ridimensionamento la finestra o l'orientamento del dispositivo mobile:

/* 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); 

Eventualmente, sostituire jQuery entro il $.

Answer 6

chiamata questo sulla finestra di ridimensionamento e/o "orientationChange" dove 960 è la larghezza preferito per il mio colorbox, e la mia 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 7

ho provato molte delle soluzioni qui, ma quanto segue dalla @berardig su GitHub ha funzionato molto bene per me

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 
    }); 
}); 

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

Answer 8

Questo sta lavorando correttamente fratelli.

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 demo page

Answer 9

Ho fatto questo in CSS per il contenitore di video di YouTube, ma fate attenzione, potrebbe tagliare alcune immagini verticali.

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

Answer 10

nelle jquary.colorbox.js File solo fare chnage muggito

linea 24: -

maxWidth: "100%", 

non fanno alcun altro cambiamento tutti lavoreranno bene con tutti gli effetti reattivo :)

Answer 11

Questa è la soluzione che ha funzionato per me, ho tirato fuori il materiale del timer originariamente pubblicato da 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); 

crediti vanno a: shabith

Answer 12

Aggiungere questo nel file js principale dopo il carico sulla casella del colore relativi js e file lib jQuery.

(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 13

Prima blocco colorbox js, inserire il seguente codice:

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); 

Leave a sinistra, a destra, in basso e in alto con il valore 'false' e lo farà il calcolo automatico. Ha funzionato per me quindi sto andando oltre!

Answer 14

Vorrei aggiungere una risposta qui. Ho avuto l'obbligo di rendere il colorbox reattivo rispettando le diverse larghezze del punto di interruzione e modificare la larghezza del popover in base alla larghezza della finestra. Fondamentalmente, posso permettermi di avere spazi vuoti a sinistra ea destra della scatola dei colori quando viene visualizzato in un browser ma non quando viene visualizzato in un telefono/tablet.

ho usato il concetto di una risposta da questo messaggio (https://stackoverflow.com/a/23431190/260665), ma fatte alcune modifiche:

/** 
* Raj: Used basic source from here: https://stackoverflow.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; 
} 

Usage:

 $.colorbox.responsiveOptions = cboxDefaultOptions; 

Quando l'oggetto colorbox è preparato solo aggiungere questo ulteriore attributo ad esso. Possiamo inoltre configurare cboxDefaultOptions o fornire un oggetto con valore personalizzato diverso a $.colorbox.responsiveOptions in modo che venga caricato con diversi punti di interruzione, se necessario.

Answer 15

Risposta dal proprietario di colorbox.

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