web-dev-qa-db-fra.com

comment rendre colorbox responsive

J'utilise colorbox sur un site responsive.

J'ai une demande: je souhaite que Colorbox s'adapte automatiquement à la taille et à l'orientation de l'écran/du périphérique mobile: si je modifie l'orientation de l'écran/du périphérique mobile (c'est-à-dire si je fais pivoter mon mobile pour ajuster les images horizontales et verticales au format souhaité) taille de l’écran, je souhaite que Colorbor s’adapte automatiquement à la nouvelle taille/orientation de l’écran) .

J'ai posé la question dans le groupe Google fermé:

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

J'ai créé deux demandes de fonctionnalités sur github:

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

mais je n'ai pas de réponse, alors j'essaie de Stack Overflow ...

Est-ce que quelqu'un sait s'il est possible de redimensionner automatiquement ColorBox en fonction du changement d'orientation (Peut-être avec une fonction de rappel dans une solution de contournement)?

Merci d'avance pour toute aide.

jquerycolorboxresponsive-design
36
vincent3569

Je l'ai résolu en utilisant les options maxWidth et maxHeight sur l'initialisation de colorbox, comme expliqué sur le site Web du développeur:

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

Vous pouvez également ajouter cet extrait pour redimensionner la palette de couleurs lors du redimensionnement de la fenêtre ou de la modification de l'orientation de votre appareil mobile:

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

Finalement, remplacez jQuery by $ .

55
NicolasBernier

J'ai essayé beaucoup de solutions ici, mais ce qui suit de @berardig sur github a très bien fonctionné pour moi

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

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

33
input

On dirait que cette question a été discutée et que des solutions pratiques ont été proposées sur le github de l'auteur.

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

9
chrisrth

Appelez-le redimensionner et/ou "changement d'orientation" dans la fenêtre Où 960 est la largeur préférée pour mon colorbox, et ma largeur maximale = 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

Vous devriez considérer le "cadrage" avec le fichier css @media query colorBox comme vous le feriez avec le reste de votre css.

2
Milche Patern

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

});

Visiter page de démonstration

2
Anthony Carbon

J'ai créé cela en CSS pour youtube video box, mais attention, cela pourrait couper des images verticales.

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

C'est la solution qui a fonctionné pour moi, j'ai sorti le contenu de la minuterie qui avait été posté à l'origine par Shabith.

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

Crédits vont à: shabith

1
HappyCoder

Ajoutez ceci dans votre fichier js principal après avoir chargé les fichiers js et jquery lib associés à la boîte de couleur. 

(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

Dans le fichier jQuery.colorbox.js, apportez simplement cette modification

ligne 24: -

maxWidth: "100%",

Ne faites aucun autre changement, tout fonctionnera correctement avec tous les effets réactifs :)

1
Richardsan

Une solution trouvée sur le site Drupal utilise la fonction OFF de Colorbox:

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

Vous devrez réactiver colorbox sur une certaine taille de fenêtre.

0
Duncanmoo

Ma solution aide lorsque le site Web ne répond pas et que vous souhaitez que la colorbox soit visible sur les appareils mobiles. Personnellement, je l'utilise pour stocker le formulaire reCaptcha, il est donc obligatoire.

    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

Je voudrais ajouter une réponse ici. J'étais obligé de rendre la colorbox réactive en respectant différentes largeurs de points d'arrêt et de modifier la largeur du popover en fonction de la largeur de la fenêtre. En gros, je peux me permettre d’avoir des espaces vides à gauche et à droite de la boîte de couleurs lorsqu’elle est affichée dans un navigateur mais pas dans un téléphone/une tablette.

J'ai utilisé le concept de réponse de cet article même ( https://stackoverflow.com/a/23431190/260665 ), mais j'ai apporté quelques modifications:

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

Usage:

        $.colorbox.responsiveOptions = cboxDefaultOptions;

Lorsque l'objet colorbox est préparé, ajoutez-lui simplement cet attribut supplémentaire. Nous pouvons également configurer cboxDefaultOptions ou fournir un objet à valeur personnalisée différent à $.colorbox.responsiveOptions afin qu'il soit chargé avec des points d'arrêt différents, si nécessaire.

0
Raj Pawan Gumdal

Avant le verrouillage de colorbox js, insérez le code suivant:

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

Laissez gauche, droite, bas et haut avec la valeur 'false' et le calcul sera fait automatiquement Cela a fonctionné pour moi alors je vais au-dessus!

0
Suelen Magnaterra

Réponse du propriétaire de colorbox.

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