jQuery colorbox: Comment modifier la position de la palette de couleurs

Question

Par défaut, la palette de couleurs apparaît centrée à la fois verticalement et horizontalement sur l'écran. Existe-t-il un moyen de changer cela, par exemple à 10% du haut verticalement et centré horizontalement?

Answer 1

Ceci remplacera la première position, et vous pouvez faire la même chose avec la gauche etc:

#colorbox { top: 100px !important; } 

10% de haut serait plus délicate, vous auriez à mettre en œuvre votre propre logique de positionnement dans un rappel onload chaque fois que la palette de couleurs est affichée, ou étendre le code de colorbox, mais aucun moyen rapide de le faire.

MISE À JOUR

Colorbox dispose désormais d'une option intégrée pour le faire:

$("a").colorbox({ top: 100, left: "50%" }) 

MISE À JOUR 2

Si vous n'êtes pas lié à colorbox, je recommande fortement en utilisant qTip2.
Meilleure gestion de la position (style JQuery UI), sortie HTML plus propre et prise en charge IE < 8 plus facile.

Answer 2

#cboxWrapper{ 
    position:fixed; 
    top:100px; 
    left:300px; 
    z-index:9999; 
    overflow:hidden; 
} 

Appliquez ce style dans votre page JSP ou d'autres pages Web.

Answer 3

Vous pouvez utiliser un paramètre de palette de couleurs lorsque vous initialisez la palette de couleurs. Par exemple, pour avoir le #colorbox à la même hauteur de l'endroit où vous avez cliqué, utilisez ce (.colorbox est la classe colorbox définie par l'utilisateur):

$(".colorbox").each(function(i) { 
    var offset = $(this).offset(); 
    $(this).colorbox({top:offset.top}); 
}); 

Vous pouvez également par exemple définir un haut minimum et faire le #colorbox un peu plus

$(".colorbox").each(function(i) { 
    var offset = $(this).offset(); 
    var o = offset.top-200; 
    if(o<100){o=100;} 
    $(this).colorbox({top:o}); 
}); 

Answer 4

je devais passer outre la position colorbox à la volée et a trouvé la solution suivante:

en jquery.colorbox.js, la fonction publicMethod.position utiliser une version mise en cache des paramètres. Pour modifier settings.left/top à la volée, nous devons utiliser la propriété settings d'objet. Pour y parvenir, nous devons remplacer settings.top/left par this.settings.top/left dans la fonction (ln 499):

if(typeof this.settings!="undefined"){ 
    settings.left=this.settings.left; 
    settings.top=this.settings.top; 
} 
if (settings.right !== false) {... 

Maintenant, nous pouvons changer la position d'objet:

$.colorbox.settings.left=newLeft; 
$.colorbox.settings.top=newTop; 
$.colorbox.position();