jQuery colorbox: Jak mogę zmienić położenie bloku kolorów?

Question

Domyślnie pole kolorów jest wyśrodkowane na ekranie w pionie i poziomie. Czy istnieje sposób, aby to zmienić, na przykład do 10% od góry pionowo i wyśrodkowany w poziomie?

Answer 1

To przesłonić najwyższą pozycję, a można zrobić to samo z lewej itp:

#colorbox { top: 100px !important; } 

10% od szczytu byłoby trudniejsze, trzeba zaimplementować własną logiką pozycjonowania w zwrotnego onload za każdym razem, gdy pokazany jest kolorbox, lub rozszerzyć kod Colorbox, ale nie ma na to szybkiej metody.

UPDATE

Colorbox ma teraz wbudowaną opcję, aby to zrobić:

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

UPDATE 2

Jeżeli nie jesteś zobowiązany do ColorBox, bardzo polecam przy użyciu qTip2.
Znacznie lepsza obsługa pozycji (styl jQuery UI), czystsze wyjście HTML i łatwiejsza obsługa IE <.

Answer 2

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

Zastosuj ten styl w JSP lub innych stron internetowych.

Answer 3

Możesz użyć ustawienia colorbox podczas inicjowania Colorbox. Na przykład, aby mieć #colorbox w tej samej wysokości, gdzie kliknąłeś, to wykorzystać (.colorbox jest zdefiniowane przez użytkownika klasy Colorbox):

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

Można też na przykład ustawić minimalny szczyt i zrobić #colorbox trochę wyższy

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

Answer 4

musiałem zastąpić pozycję ColorBox w locie i znalazł następujące rozwiązanie:

W jquery.colorbox.js funkcja publicMethod.position używania pamięci podręcznej wersję ustawień. Aby zmodyfikować settings.left/top w locie, musimy użyć właściwości settings obiektu. Aby to osiągnąć, musimy zastąpić settings.top/left przez this.settings.top/left wewnątrz funkcji (LN 499):

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

Teraz możemy zmienić położenie obiektu:

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