Zmień rozmiar Colorbox na zmianę rozmiaru okna

Question

Colorbox wydaje się być dobrze dopasowany "po wyjęciu z pudełka" w celu uzyskania elastycznego projektu. Jestem przesłanianie domyślne ustawienia wymiarów z procentów, a następnie ustawienie maksymalnych wartości tak sprawy nie wymkną się spod kontroli na ogromnych ekranach:

$.colorbox.settings.width = "92%"; 
$.colorbox.settings.height = "90%"; 
$.colorbox.settings.maxHeight = 850; 
$.colorbox.settings.maxWidth = 1200; 

to działa. Zmieniam także element cboxTitle, aby był dokładnie taki, jak img powyżej, tak, że moje czasami długie napisy są zawsze ładnie ułożone.

$(document).bind('cbox_complete', function(){ 
    var photoWidth = $(".cboxPhoto").innerWidth(); 
    var photoContainer = $("#cboxContent").outerWidth(); 
    var leftPix = (photoContainer - photoWidth)/2;  
    $("#cboxTitle").css({'left' : leftPix, 'width' : photoWidth}); 
}); 

Co również wydaje się działać. Pozostaje przerażająca część: zajmowanie się zdarzeniami zmiany rozmiaru okna. Próbuję następujące

$(window).on("resize", function(){ 
    $.fn.colorbox.resize({ 
     height: "90%", 
     width: "92%" 
    }); 
}); 

(ja faktycznie przy użyciu niestandardowych debouncedresize imprezę zamiast standardowego jquery rozmiaru, aby zdławić strumień zmiany rozmiaru wydarzeń w Webkit, ale odchodzę, że część z ponieważ nie jest to istotne. Powtarzam te same wartości szerokości i wysokości w opcjach rozmiaru, ponieważ w przeciwnym razie nie nastąpi zmiana rozmiaru :()

Ta ostatnia część w ogóle nie działa. spróbuj rozwiązać problemy:

1) Gdy użytkownik załaduje zestaw kolorów w standardowym rozmiarze, a następnie skaluje rzutnię n strzałka, wysokość elementu cboxPhoto nie skaluje się poprawnie. Szerokość kurczy się prawidłowo, ale wysokość pozostaje taka sama, tworząc "ściskanie". Więc próbowałem dodać height:auto do css dla cboxPhoto. To przywraca proporcje, ale teraz element cboxPhoto jest o wiele za duży i jest przycięty. Dostaję paski przewijania wewnątrz modalu, kiedy jeszcze tego nie robiłem. Zdjęcie nie ma takiego rozmiaru, w jakim znajdowałoby się, gdy zamknęłoby się pudełko kolorów i ponownie je otworzyło przy nowej szerokości okna przeglądarki.

2) Wartość css dla parametru cboxTitle nie jest ponownie obliczana. Funkcja zmiany rozmiaru w polu colorbox nie wydaje się wywoływać zdarzenia cbox_complete. Czy nie powinien?

Chciałbym rozwiązać te problemy, ale wyczuwam też, że być może najłatwiej jest rozwiązać ten przypadek użycia, biorąc pod uwagę, że obecny stan wtyczki polega na tym, że zamiast tego wystarczy zamknąć i ponownie załadować cały zestaw kolorów po zmianie rozmiaru okna, ale wróć do dokładnie tej samej treści w galerii, którą oglądał użytkownik przed zdarzeniem zmiany rozmiaru. Ale jestem niejasny, jak to zakodować. Z góry dziękuję za pomoc!

P.S. Wszystkim, proszę oszczędzić mi argumentu, że to tylko projektanci zmieniają rozmiar okna. Przepraszam, po prostu tego nie kupuję. Ludzie skalować się, gdy wspaniałe zdjęcie jest na ekranie, a zwłaszcza tabletki obraca się cały czas ...

Answer 1

Czy kiedykolwiek spróbować czegoś takiego:

if($('#colorbox').length && $('#colorbox').css('display') != 'none') { 
     setTimeout(function(){ 
       $.colorbox.resize({ 
        width: '100%', 
        height: '80%' 
       }); 
      }, 1500); 
    } 

try bez „.fn” iz pewne opóźnienie też ...

Answer 2

Czy możesz po prostu ustawić wysokość i szerokość CSS okna colorbox na zmianę rozmiaru?

$(window).on("resize", function(){ 
    //check if colorbox is open. This 'if' is from stackoverflow, I haven't tested 
    if($('#colorbox').length && $('#colorbox').css('display') != 'none') { 
     //replace colorboxID with the correct ID colorbox uses 
     document.getElementById('coloboxID').style.width='92%'; 
     document.getElementById('coloboxID').style.height='90%'; 
    } 
}); 

Answer 3

Chciałbym uniemożliwić korzystanie z $.resize w takich przypadkach. Rozważam, że ten CSS Media Queries generuje responsywny projekt. Dlaczego więc nie korzystać z zapytań o media.

W praktyce nigdy nie próbowałem colorbox, ale domyślam się, że $.colorbox.settings.width = "92%"; wstawia element wstawiany do elementu CSS.

Usuń te ustawienia. Zapobiegnij wstawianiu CSS w swoim elemencie colorbox. Następnie po prostu użyj CSS, aby uzyskać width i height dla początkowego skalowania dla większych komputerów.

I użyj Media Queries, aby zwiększyć rozmiary modalne w oknie zmiany rozmiaru okna.

#colorbox{ 
    height: 90%; 
    width: 92%; 
} 

@media (max-width: 992px) { 
    #colorbox{ 
     height: 90%; 
     width: 92%; 
    } 
} 

wielokrotnego zapytania są również całkowicie legalne. Możesz więc ustawić rozmiary modalne na jeszcze mniejsze rozmiary.

@media (max-width: 430px) { 
    #colorbox{ 
     height: 96%; 
     width: 98%; 
    } 
} 

Możecie użyć px zamiast %, ale w tym przypadku ColorBox modalne szerokość/wysokość będzie skakanie trochę się podczas przemieszczania się z jednego rozmiaru na inny. Ale możesz użyć właściwości CSS o wartości transition, aby w tym przypadku proces zmiany rozmiaru był bardziej płynny.