[NivoSlider] Wysokość obrazka - 50% Opcje

[Slide]

Witam.
Proszę o pomoc szczególnie osoby, które miały już jakąś styczność z NivoSliderem. Tworzę stronkę, a raczej szablon do Wordpressa, gdzie na samej górze będzie znajdował się slider z aktualnościami. Używam zwykłego slidera dla stron HTML (nie wtyczki dla Wordpress chociaż wiem, że takowa istnieje). Wszystko byłoby w porządku, tylko że chciałbym aby wysokość slidera wynosiła zawsze 50% wysokości ekranu. Ze zmianą szerokości poradziłem sobie za pomocą styli CSS, tylko męczę się z wysokością. Kiedy w stylach CSS wpiszę dla każdego obrazka height: 50%, wtedy wszystko jest okej tylko dla pierwszego obrazka, każdy kolejny ma wysokość 50% obrazka poprzedniego. Czyli np pierwszy obrazek ma wysokość 600px, po przewinięciu drugi ma wysokość 300px, kolejny 150px itd. Ja chciałbym aby wszystkie miały jednakową wysokość równą 50% wysokości ekranu.

Proszę o pomoc. Nie ma znaczenia sposób w jaki to osiągne. Może to być jQuery, JS, a może być to zwykły CSS.

Mógłby być to np. prosty skrypt w JS który pobiera wysokość okna przeglądarki, mnoży ją razy 50%, do otrzymanej wartości dodaje na końcu "px;" a wszystko to przypisuje do wartości height dla określonego elementu DIV.
Być może właśnie to jest rozwiązanie, jednak nie znam JS abym mógł to sam napisać (IMG:style_emoticons/default/sad.gif)

Jeśli ktoś nie wie o co mi chodzi, proszę bardzo:
http://tnijurl.com/slider/ - przykład działania
http://tnijurl.com/nivo/ - pliki źródłowe powyższego przykładu (paczka .rar do pobrania)

Ten post edytował Slide 7.12.2013, 19:46:13

[_Borys_]

[CSS] pobierz, plaintext 
.nivoSlider img {
	min-height: 50%;
       }
[CSS] pobierz, plaintext 

Nie wiem czy o ten efekt chodziło, obrazki jakby powiększone i pixelizowane.
No ale po usunięciu twojego stylu

[CSS] pobierz, plaintext 
.nivoSlider img {
	height: 50%;
      }
[CSS] pobierz, plaintext 

Taki sam efekt jak mój.

Ten post edytował _Borys_ 7.12.2013, 20:41:23

[Slide]

Niestety nie chodziło mi do końca o to bo pierwszy obrazek nie miał wysokości 50% (połowa wysokości ekranu). Moje niedopatrzenie i błąd. Dodałem jednak do tego co mi napisałeś dodatkowo wartość max-height. Teraz w stylach wygląda to tak:

[CSS] pobierz, plaintext 
.nivoSlider img {
	min-height: 50%;
        max-height: 50%;
}
[CSS] pobierz, plaintext 

I właśnie taki wymiar slidera chciałem osiągnąć. Jednak pojawił się nowy problem, ponieważ teraz coś jest nie tak z przejściami. Przejście na nowy obrazek jest teraz jakby mniejsze i pełne rozmiary osiąga dopiero przed kolejnym przejściem co wygląda nieestetycznie.

Nie myślałem, że zmiana rozmiaru slidera może być taka kłopotliwa. Linki uaktualniłem, więc można zobaczyć jak wygląda to na stronie, lub pobrać źródła, żeby wyłapać moje błędy.

Proszę znowu o pomoc, może jedyne sensowne wyjście to użycie JS?

Ten post edytował Slide 7.12.2013, 21:38:50

[_Borys_]

[CSS] pobierz, plaintext 
.nivoSlider img {
    height: 100% !important;
}
[CSS] pobierz, plaintext 

Wysokość do połowy:

[JAVASCRIPT] pobierz, plaintext 
$(window).load(function() {
   $('#slider').css({height:Math.round($(window).height()/2)+'px'}).nivoSlider();
});
[JAVASCRIPT] pobierz, plaintext 

[Slide]

Dziękuję bardzo _Borys_! Działa jak należy (IMG:style_emoticons/default/smile.gif)