Comment puis-je redimensionner dynamiquement le plugin jQuery Colorbox ?

Question

Le contenu AJAX chargé dans une Colorbox contient du JavaScript qui redimensionne les éléments du contenu. Colorbox détermine sa taille sur la base des tailles avant que tout AJAX ne se produise. Comment puis-je faire en sorte que la Colorbox soit redimensionnée après le chargement du contenu ?

Voici un lien où quelqu'un a dit que vous pouvez appeler colorbox() à nouveau après qu'il ait été chargé, mais je n'arrive pas à trouver comment le faire :

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

Answer 1

Pour redimensionner dynamiquement la colorbox, il faut dire .

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

Si vous voulez redimensionner une boîte de couleur qui charge un Iframe, vous devez ajouter 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});

});

J'espère que cela vous aidera et bon codage ! Trey Paschal Concepteur / Développeur Web

Answer 2

Dans Colorbox 1.3, vous pouvez désormais appeler la fonction de redimensionnement :

$('.item').colorbox.resize();

Answer 3

Lorsque vous invoquez la colorbox, il suffit d'ajouter un élément onComplete à la fonction, par exemple

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

Par conséquent, chaque fois que du contenu est chargé dans la boîte à couleurs, celle-ci déclenche sa fonction de redimensionnement.

Answer 4

J'avais besoin d'utiliser setTimeout pour que le redimensionnement fonctionne pour moi.
Je fais un appel ajax pour obtenir une image, j'attends 2 secondes et je règle la colorbox pour cette image.
Pour terminer, je redimensionne la boîte à couleurs en fonction de la taille de l'image.

Sans délai d'attente, cela n'a pas fonctionné pour moi car l'image n'a pas été chargée complètement et j'ai obtenu largeur=0, hauteur=0 comme 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});
}

Answer 5

Resize prend en fait un objet jQuery et l'utilise pour effectuer le redimensionnement. Au lieu de cela, vous pouvez simplement faire recharger la colorbox comme ceci :

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