Witam wszystkich
Mam kłopot i nie mogę sobie z tym poradzić

a mianowicie... Zrobiłem sobie miniaturki i po kliknięciu otwiera mi się większe zdjęcie... Chciałbym aby w czasie ładowania zdjęcia (bądź zanim załaduje się zdjęcie) pokazywał się gif z ładowaniem... Po części udało mi się to zrobić z tym że ustawiłem gifa ładującego na przeźroczystość i niestety zdjęcia ładują się tez przeźroczyste (z tego względu że umieszczone są w bloku zawierającym ładujący obrazek) - jak postawię osobno ten blok div to nie działa mi obrazek ładujący
będę wdzięczny za jakieś podpowiedzi
ponizej kod jquery i html
css;
div#loading_mini {
background: url(../loadin2.gif) no-repeat center center;
width:100%;
height:100%;
display:none;
}
.fotki {
display: none;
}
//---- miniaturki ---------------
$('img[rel]').click(function () {
var rel = $(this).attr("rel");
$('.fotki').hide();
$('#loading_mini').css("opacity",0.5).show(); //div zawierajacy obrazek ladowania
if ($('.fotki').load())
{
$('#loading_mini').css("opacity",1);
$("div#"+rel).fadeIn('slow')
}
});
<!--miniaturki-->
<div id="pokaz" style="display:none"> <div class="image_mini_panel"><div id="miniaturki"><img src="user_page/id_2/mini/mini_foto1.jpg" rel="fotka3"></img></div></div> <div class="image_mini_panel"><div id="miniaturki"><img src="user_page/id_2/mini/mini_foto2.jpg" rel="fotka2"></img></div></div> <div class="image_mini_panel"><div id="miniaturki"><img src="user_page/id_2/mini/mini_foto3.jpg" rel="fotka1"></img></div></div>
<!---duze fotki -->
<div class="fotki" id="fotka1"><img src="user_page/id_2/duze_foto1.jpg"></img></div> <div class="fotki" id="fotka2"><img src="user_page/id_2/duze_foto2.jpg"></img></div> <div class="fotki" id="fotka3"><img src="user_page/id_2/duze__foto3.jpg"></img></div>
Pozdrawiam