it-swarm.com.de

Wie kann ich die Größe des Colorbox-Plugins von jQuery dynamisch ändern?

Der Inhalt von AJAX, der in eine Colorbox geladen wird, enthält JavaScript, das die Größe des Inhalts ändert. Colorbox bestimmt seine Größe anhand der Größen, bevor alle AJAX auftreten. Wie kann ich die Größe des Colorbox ändern, nachdem der Inhalt geladen wurde?

Hier ist ein Link, wo jemand gesagt hat, dass Sie colorbox () nach dem Laden erneut aufrufen können, aber ich kann nicht herausfinden, wie das geht:

http://groups.google.com/group/colorbox/browse_thread/thread/535d21c69e9006b0

31
James Skidmore

In Colorbox 1.3 können Sie jetzt die Größenänderungsfunktion aufrufen:

$('.item').colorbox.resize();
29
James Skidmore

Um die Farbbox dynamisch zu ändern, die Sie sagen möchten.

colorbox.resize({width:"300px" , height:"300px"})

Wenn Sie die Größe eines Farbfelds ändern möchten, das ein Iframe lädt, würden Sie dem Kopf Ihres Zieldokuments so etwas hinzufügen.

$(document).ready(function(){
    var x = $('mydiv').width();
    var y = $('mydiv').height();

    parent.$.colorbox.resize({width:x, height:y});

});
42
user573434

Wenn Sie die Farbbox aufrufen, fügen Sie einfach eine onComplete-Funktion hinzu, z

$('.mycolorboxes').colorbox({    
  onComplete : function() { 
       $(this).colorbox.resize(); 
  }    
});

Daher wird jedes Mal, wenn Inhalte in die Colorbox geladen werden, die Größenänderungsfunktion aktiviert.

20
Jason

Ich musste die Methode setTimeout verwenden, um die Größenanpassung für mich zu ermöglichen. 
Ich mache einen Ajax-Anruf, um ein Bild zu erhalten, warte 2 Sekunden und stelle die Farbbox für dieses Bild ein. 
Zum Abschluss verkleinere ich die Farbbox mit der Bildgröße.

Ohne Timeout hat es für mich nicht funktioniert, weil das Bild nicht vollständig geladen wurde und ein width = 0, height = 0 als Bildgröße hat.

$.get('/component/picture/getPicture.do?pictureId=' + id, 
       function(data) {  //callback function
           $('#pictureColorbox').html(data);  //set picture inside div on this page
           setTimeout(function(){  // set timeout 2 sec
               //create colorbox for inline content "#pictureColorbox" and call showPicture on complete
               $.colorbox({href:"#pictureColorbox", inline:true,  title:'', initialWidth:900, initialHeight:600,  scrolling:false, onComplete: function(){showPicture(id);}});
           }, 2000); 
       });

function showPicture(id) {
    var x = $('#' + id + " #picture").width();
    var y = $('#' + id + " #picture").height();
    $.colorbox.resize({innerWidth:x, innerHeight:y});
}
5
Svetlana

bei der Größenänderung wird tatsächlich ein jQuery-Objekt verwendet, und die Größe wird geändert. Stattdessen können Sie die Colorbox einfach so laden:

$(window).resize(function(){
    $.fn.colorbox.load();
}); 
3
Chris

Fügen Sie diesen Code einfach auf der Seite ein, die in der Variablen iframe geöffnet wird:

$(document).ready(function() {
    parent.$.fn.colorbox.resize({
        innerWidth: $(document).width(),
        innerHeight: $(document).height()
    });
});
3

Wie ich weiß, kann die Größe der Colorbox mit iframe: true nicht geändert werden. Farbe mit iframe: false kann nur die Höhe ändern (mit jQuery.fn.colorbox.resize()).

2
Mayur bhalgama

Hier ist eine weitere mögliche Lösung, die wirklich einfach zu implementieren ist (obwohl sie mit allen von Ihnen angerufenen Colorboxen funktionieren kann. Abhängig von Ihrer Situation ist dies möglicherweise nicht die beste Lösung). Wenn dies für Sie funktioniert, können Sie den Code einfach an eine beliebige Stelle in Ihrem Code ziehen und dort ablegen. Dies funktioniert automatisch. Die Werte HEIGHT_PERCENTAGE und WIDTH_PERCENTAGE sind so festgelegt, dass Sie die Größe des Fensters relativ zur Gesamtfenstergröße festlegen können. Sie können einige andere Werte hinzufügen, um Mindestgrößen usw. zu erstellen.

    $(function() {
        $(window).bind('resize', function() {

            var HEIGHT_PERCENTAGE = .60; // '1' would set the height to 100%
            var h = "innerHeight" in window 
               ? window.innerHeight
               : document.documentElement.offsetHeight; 
            h *= HEIGHT_PERCENTAGE;

            var WIDTH_PERCENTAGE = .40; // '1' would set the width to 100%
            var w = "innerHeight" in window 
               ? window.innerWidth
               : document.documentElement.offsetWidth;
            w *= WIDTH_PERCENTAGE;

            $.colorbox.resize({width: w, height: h});
        }).trigger('resize');
    });

Ein Teil dieser Antwort ist angepasst an: https://stackoverflow.com/a/3012772/1963978

1
matthewsheets
$.colorbox.resize()

Dies funktioniert auch für die aktive Colorbox, wenn Sie den Selector für die aktive Colorbox nicht kennen.

1
Scott

Chris 'Antwort brachte mich auf halber Strecke, aber es verursachte einen massiven Fehler in IE7/8, da diese Funktion jedes Mal aufgerufen wird, wenn das Fenster seine Größe ändert, und sogar seltsam auf einigen asp.net-Buttons, die ein Postback verursachen?!?! auch wenn es keine aktive colorbox gibt.

Das scheint es zu lösen:

    $(window).resize(function(){
               if ($('#colorbox').length) {
     if( $('#colorbox').is(':hidden') ) {                    
          }
         else {
           $.fn.colorbox.load();
         }
       }
    });

Es prüft, ob #colorbox mit .length existiert, und prüft dann, dass es nicht versteckt ist. Dies ist der Trick, den ich in Firebug erkennen konnte, dass beim Schließen der Colorbox diese nicht vollständig entfernt/zerstört wird.

Hoffe das hilft.. 

0
Markive
$(window).resize(function(){    
        $.colorbox.resize({
            maxWidth:"auto",
            width:95+'%',
        });
});
0
Dishan TD

Sie können es in einer Callback-Funktion aufrufen, die es bietet:

$(".single").colorbox({}, function(){
     alert('Howdy, this is an example callback.');
});
0

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 );
}); 
});
0
Anthony Carbon

Dies ist möglich, wenn Sie die Höhe/Breite des Inhalts in iframe ermitteln können. Anschließend können Sie die colorbox.resize () - Funktion verwenden, um die Farbbox erneut zu ändern.

0
XuDing

Nun, ich habe Colorbox noch nicht verwendet, aber ich habe ähnliche Dinge verwendet, und wenn ich es richtig verstanden habe, muss man den Stil der Box ändern, nachdem etwas geladen wurde.

Wenn Sie feststellen, welche id/class-Werte auf die Colorbox angewendet werden, können Sie dies so einstellen, dass beim Laden des AJAX - Inhalts eine Funktion aufgerufen wird, um den Stil des entsprechenden Teils der Colorbox zu ändern.

0
Eugene Bulkin

Ich weiß nicht, wonach Sie suchen, aber ich habe diesen Thread gefunden, als ich auf der Suche nach meiner eigenen Lösung war. Ich habe eine Farbbox im iframe-Modus. Dort befindet sich eine Schaltfläche, die beim Klicken die aktuelle Farbbox durch eine neue ersetzen muss. Ich mache das einfach ...

parent.$.colorbox({
    href: newurl,
    iframe: true,
    width: "600px",
    height: "240px",
    onClosed: function() {
    }
});

Dadurch wird eine neue Seite in eine neue Farbbox am selben Ort geladen, und der Übergang ist sehr glatt. 

0
Doug Wolfgram