web-dev-qa-db-fra.com

Comment redimensionner dynamiquement le plugin jQuery Colorbox?

Le contenu AJAX chargé dans une Colorbox contient du JavaScript qui redimensionne les éléments qu'il contient. Colorbox détermine sa taille en fonction de la taille avant que tout AJAX ne se produise. Comment puis-je redimensionner la Colorbox après le chargement du contenu?

Voici un lien où quelqu'un a dit que vous pouvez appeler colorbox () une fois chargé, mais je ne vois pas comment faire:

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

jquerycolorbox
31
James Skidmore

Dans Colorbox 1.3, vous pouvez maintenant appeler la fonction de redimensionnement:

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

Pour redimensionner dynamiquement colorbox que vous voulez dire.

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

Si vous souhaitez redimensionner une zone de couleur qui charge une iframe, vous ajouterez quelque chose comme ceci à l'en-tête de votre document cible.

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

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

});
42
user573434

Lorsque vous appelez la colorbox, ajoutez-y simplement une fonction onComplete, par exemple

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

Par conséquent, chaque fois que le contenu est chargé dans la colorbox, la fonction de redimensionnement est activée.

20
Jason

Je devais utiliser setTimeout method pour que le redimensionnement fonctionne pour moi. 
Je fais un appel ajax pour obtenir une image, attendez 2 secondes et définissez colorbox pour cette image. 
Une fois terminé, je redimensionne la palette de couleurs avec la taille de l'image.

Sans délai d'attente, cela ne fonctionnait pas pour moi car l'image n'était pas complètement chargée et un got width = 0, height = 0 était la taille de l'image.

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

le redimensionnement prend en réalité un objet jQuery et l’utilise pour le redimensionnement. Au lieu de cela, vous pouvez simplement faire recharger la colorbox comme ceci:

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

Il suffit de mettre ce code sur la page qui s’ouvre dans la iframe:

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

Comme je le sais, colorbox avec iframe: true, ne peut pas être redimensionné. La couleur avec iframe: false peut uniquement redimensionner la hauteur (en utilisant jQuery.fn.colorbox.resize()).

2
Mayur bhalgama

Donc, voici une autre solution possible qui est vraiment facile à mettre en œuvre (bien que cela fonctionne sur toutes les boîtes de couleurs que vous appelez, donc selon votre situation, cela pourrait ne pas être le meilleur). Si cela fonctionne pour vous, vous pouvez simplement faire glisser le code pratiquement n'importe où dans votre code et cela fonctionnera automatiquement. Les valeurs HEIGHT_PERCENTAGE et WIDTH_PERCENTAGE permettent de définir la taille de la redimensionnement de la fenêtre par rapport à la taille totale de la fenêtre. Vous pouvez ajouter d'autres valeurs pour créer des tailles minimales, etc.

    $(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');
    });

Une partie de cette réponse est adaptée de: https://stackoverflow.com/a/3012772/1963978

1
matthewsheets
$.colorbox.resize()

Cela fonctionnera également sur la colorbox active si vous ne connaissez pas le sélecteur de la colorbox active.

1
Scott

La réponse de Chris m'a amené à mi-chemin, mais cela a provoqué une énorme erreur dans IE7/8 car il appellera cette fonction à chaque fois que la fenêtre sera redimensionnée et même étrangement sur certains boutons asp.net qui causent une publication?!?! même lorsqu'il n'y a pas de colorbox actif.

Cela semble le résoudre:

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

Il vérifie que #colorbox existe en utilisant .length, puis vérifie que ce n’est pas caché, ce qui est une bonne chose, comme je pouvais le voir dans Firebug: lorsque vous fermez la boîte de couleur, elle n’est pas complètement supprimée/détruite, mais simplement cachée!

J'espère que cela t'aides.. 

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

Vous pouvez l'appeler dans une fonction de rappel fournie:

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

Celui-ci fonctionne correctement frères.

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

Cela peut être fait si vous pouvez détecter la hauteur/largeur du contenu dans iframe, puis vous pouvez utiliser la fonction colorbox.resize () pour redimensionner à nouveau la colorbox.

0
XuDing

Eh bien, je n’avais jamais utilisé Colorbox auparavant, mais j’ai utilisé des logiciels similaires, et si j’ai bien compris, vous devez en modifier le style après le chargement de quelque chose.

Si vous trouvez quelles valeurs id/class sont appliquées à la Colorbox, vous pouvez faire en sorte que lorsque le contenu AJAX soit chargé, une fonction soit appelée pour modifier le style de la partie appropriée de la Colorbox.

0
Eugene Bulkin

Je ne suis pas sûr de ce que vous recherchez, mais j'ai trouvé ce fil alors que j'étais en quête de ma propre solution. J'ai une boîte de couleurs en mode iframe. Il y a un bouton là-bas qui, lorsque vous cliquez dessus, doit remplacer la colorbox actuelle par une nouvelle. Je fais juste ça ...

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

Cela recharge une nouvelle page dans une nouvelle boîte de couleurs au même endroit et la transition est très lisse. 

0
Doug Wolfgram