wie man die colorbox anspricht

Ich habe es mit den Optionen maxWidth und maxHeight der Colorbox-Initialisierung gelöst, wie auf der Entwickler-Website erläutert:

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

Sie können dieses Snippet auch hinzufügen, um die Größe der Farbbox zu ändern, wenn Sie die Fenstergröße ändern oder die Ausrichtung Ihres mobilen Geräts ändern:

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

Ersetzen Sie eventuell jQuery durch $ .

Ich habe viele der Lösungen hier ausprobiert, aber das folgende von @berardig auf github hat für mich sehr gut funktioniert

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

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

Es sieht so aus, als ob dieses Problem besprochen und auf dem Github des Autors Arbeitslösungen angeboten wurden

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

Rufen Sie dies bei Fenstergröße und/oder "Orientierungsänderung" .__ auf. Dabei ist 960 die bevorzugte Breite für meine Farbbox und meine 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();

}

Sie sollten "Framing" mit der @media query colorBox-CSS-Datei genauso betrachten wie mit dem Rest Ihrer CSS.

Dieser arbeitet richtig Brüder.

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

});

Besuchen Sie Demo-Seite

Ich habe dies in CSS für Youtube Video Box gemacht, aber Vorsicht, es könnte ein paar vertikale Bilder schneiden.

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

Dies ist die Lösung, die für mich funktioniert hat. Ich habe das Timer-Material herausgenommen, das ursprünglich von Shabith veröffentlicht wurde.

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

Credits gehen an: shabith

Fügen Sie dies in Ihre js-Hauptdatei ein, nachdem Sie die farbfeldbezogenen js- und jquery-lib-Dateien geladen haben. 

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

Nehmen Sie in der jQuery.colorbox.js-Datei diese Änderung vor

zeile 24: -

maxWidth: "100%",

Nehmen Sie keine anderen Änderungen vor, alle funktionieren gut mit allen Reaktionseffekten :)

Eine Lösung, die ich auf der Drupal-Site gefunden habe verwendet die OFF-Funktion von Colorbox:

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

Sie müssen die Colorbox über eine bestimmte Fenstergröße erneut einleiten.

Meine Lösung hilft, wenn die Website nicht reagiert und die Farbbox auf mobilen Geräten sichtbar sein soll. Ich persönlich verwende es, um das reCaptcha-Formular zu speichern, daher ist es obligatorisch.

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

Ich möchte hier eine Antwort hinzufügen. Ich hatte die Anforderung, die Colorbox ansprechend auf unterschiedliche Haltepunktbreiten anzupassen und die Breite des Popovers basierend auf der Fensterbreite zu ändern. Grundsätzlich kann ich es mir leisten, links und rechts neben der Colorbox Leerzeichen zu haben, wenn es in einem Browser angezeigt wird, nicht aber wenn es in einem Telefon/Tablet angezeigt wird.

Ich habe das Konzept einer Antwort aus genau diesem Beitrag ( https://stackoverflow.com/a/23431190/260665 ) verwendet, jedoch einige Änderungen vorgenommen:

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

Verwendungszweck:

        $.colorbox.responsiveOptions = cboxDefaultOptions;

Wenn das Colorbox-Objekt vorbereitet ist, fügen Sie dieses zusätzliche Attribut hinzu. Wir können auch cboxDefaultOptions konfigurieren oder ein anderes benutzerdefiniertes Objekt an $.colorbox.responsiveOptions übergeben, damit es bei Bedarf mit anderen Haltepunkten geladen wird.

Fügen Sie vor der Colorbox-js-Sperre den folgenden Code ein:

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

Verlassen Sie links, rechts, unten und oben mit dem Wert 'false', und die Berechnung wird automatisch ausgeführt. Es hat für mich funktioniert, also gehe ich vorbei!

Antwort vom Besitzer der Colorbox.

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