jQuery z czytywanie wartości height()?

Witam,
Piszę ponieważ natknąłem się na pewien problem i myślę, że to dobre miejsce do rady bądź rozwiązania.
Mianowicie mam slider, który ma strzałki next i prev. Po kliknięciu next wartość kontenera w którym znajdują się slajdy jest odejmowana o wartość wysokości
img i top idzie na -(wartość wysokości img) po każdym kliknięciu. W przypadku prev na odwrót.

Chciałbym sczytać wartość wysokości img i przypisać to do zmiennej, która zmieni wartość slajdu top o wartość wysokości img.
Jeżeli wartość wysokości sczytywana jest poprzez .ready to alert wyświetla wartość 0 (dla wysokości), natomiast jeśli sczytywana jest poprzez .load jest poprawna wartość.
Zastanawiam się czy jest opcja sczytania z funkcji .load i przypisania tej wartości do przycisków nawigacyjnych w funkcji .ready.

Próbowałem event click dać do funkcji .load, ale to nie działa.
Co do jQuery to jestem na poziomie nauki...
Jeżeli wiecie jak rozwikłać te zagadkę lub macie jakieś inne pomysły na jej zastosowanie piszcie w odpowiedzi.

Z góry dziękuję za odpowiedź. (o ile jest pomocna bądź nakierowująca :))

użyj zmiennej globalnej - zdefiniowanej poza jakoklwiek funkcją.

Na podglądzie wszystko działa, ale po wrzuceniu na serwer wyświetla null :(

Daj jakiś kod, na którym możemy popracować, bo Ty napisałeś "ale to nie działa", no ale powinno, a bez kodu to nie wywróżymy tylko możemy dalej rozmawiać o tzw. "dupie marynie"

style.css

.slider{background: url('../img/bgSlider.png') no-repeat; width: 447px; height: 289px;}
.slides{position: absolute; top: 0; left: 34px; z-index:0;}
.ramka{position: absolute; top: 0; left: 33px; z-index:1; height: auto;}
.slideArea{position: relative; z-index: 2; width: 100%; height: 289px; overflow:hidden;}
.clickArea{margin:auto; width:65%;height:100%;position:absolute; right:0; left:0; text-decoration:none; z-index:2; color:#fff;}
.clickArea a{display:block; width:100%; height:290px; margin: auto;}

load.js

$(window).load(function() {

	var obszar = $('.slideArea');	
	var hRamka = $('.ramka').css('height');
	var y = $('.ramka').width();
	var x = $('.ramka').height();
	var clickArea = $('.clickArea a');
	var slide = $('.slides');
	var slideImg = $('.slides img');
	var hSlideImg = $('.slides img').height() + 4;
	
	obszar.css('height', x);
	clickArea.css('height', x);
	slide.css('width', y);
	slideImg.css('width', y);
})

script.js:

var main = function() {
	var hSlideImg = $('.slides img').height() + 4;
	var slide = $('.slides');
	var avalibleArea = $('.clickArea');
	var next = $('.next');
	var prev = $('.prev');
	var topowy = $('.slides').css('top');
	var avalibleAreaTop = $('.clickArea').css('top');
	var hArea = $('.slideArea').css('height');
	
	var x = $('.ramka').height();
	var hRamka = $('.ramka').css('height');
		
	alert('wysokość img: ' + hSlideImg);
	
	if(topowy == 0 + 'px'){
		prev.addClass("disnon");	
	}else{
		prev.removeClass("disnon");
	}
	next.removeClass("disnon")
	
	
	
	prev.click(function() {
		topowy = $('.slides').css('top');
		avalibleAreaTop = $('.clickArea').css('top');
		next.removeClass("disnon");
		if(topowy == -282 + 'px'){
		prev.addClass("disnon");	
	}else{
		prev.removeClass("disnon");
	}
			slide.animate({
				top: '+=' + hSlideImg
			}, 400)		
			
			avalibleArea.animate({
				top: '+=' + hSlideImg
			}, 400)		
	});
	
	next.click(function() {			
		topowy = $('.slides').css('top');
		avalibleAreaTop = $('.clickArea').css('top');
		prev.removeClass("disnon");		
		if(topowy == -1692 + 'px'){
		next.addClass("disnon");	
	}else{
		next.removeClass("disnon");
	}
			slide.animate({
				top: '-=' + hSlideImg
			}, 400)
			
			avalibleArea.animate({
				top: '-=' + hSlideImg 
			}, 400)		
	});


};

$(document).ready(main);

Zauważyłem, że po wpisaniu adresu w wyszukiwarkę działa poprawnie (w większości przypadków), ale gdy wciśnie się F5 bądź kliknie odśwież wyświetlana wartość wysokości elementu to 4px.

Może postaram się łatwiej to opisać:
Wysokość elementu1 jest dopasowywana do wysokości elementu2 ze względu na zmienną wartość wysokości elementu2 za pomocą jquery.

var main = function() {
        var obszar = $('.slideArea');
	var x = $('.ramka').height();

	obszar.css('height', x);
};

$(document).ready(main);

Następnie klasie next przypisuje zdarzenie click ze zmianą wartości top o zmienną roznicaX:

var main = function() {

        var obszar = $('.slideArea');
        var slide = $('.slides');
	var x = $('.ramka').height(); // .ramka jest obrazkiem przypisanym z kodu html
        var roznicaX = x;

	obszar.css('height', x);

next.click(function() {			
		prev.removeClass("disnon");		

			slide.animate({
				top: '-=' + roznicaX
			}, 400)
			
			avalibleArea.animate({
				top: '-=' + roznicaX 
			}, 400)		
	});

};

$(document).ready(main);

Lokalnie działa poprawnie. Na serwerze sczytuje wartość 0 dla zmiennej x. Pytanie: dlaczego?