it-swarm.com.de

wie man die colorbox anspricht

Ich verwende Colorbox in einer responsiven Website.

Ich habe eine Bitte: Ich wünsche mir, dass sich Colorbox automatisch an die Größe und Ausrichtung des Bildschirms/Mobilgeräts anpasst: Wenn ich die Ausrichtung des Bildschirms/Mobilgeräts ändere (dh, wenn ich mein Handy drehe, um die horizontalen und vertikalen Bilder an das Gerät anzupassen Bildschirmgröße, ich wünsche mir, dass sich Colorbor automatisch an die neue Größe/Ausrichtung des Bildschirms anpasst) .____. Colorbox stellt sich vorerst nur beim Laden eines neuen Bildes (z. B. in einer Diaschau) automatisch ein.

Ich habe die Frage in der geschlossenen Google-Gruppe gestellt:

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

Ich habe zwei Feature-Requests auf Github erstellt:

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

ich habe aber keine Antwort, also probiere ich Stack Overflow ...

Weiß jemand, ob es möglich ist, ColorBox automatisch auf Basierend auf der Orientierungsänderung zu skalieren (möglicherweise mit einer Rückruffunktion in einer Problemumgehung)?

Vielen Dank im Voraus für jede Hilfe.

36
vincent3569

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 $ .

55
NicolasBernier

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

33
input

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

9
chrisrth

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

}
3
Ray

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

2
Milche Patern

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

2
Anthony Carbon

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;
}
}
1
Iggy

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

1
HappyCoder

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);
1
Sumith Harshan

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

1
Richardsan

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.

0
Duncanmoo

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);
    }
0
Wojtek Zeglin

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.

0

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!

0

Antwort vom Besitzer der Colorbox.

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