- chciałbym zrobić, aby po kliknięciu "następne" lub "poprzednie" zdjęcia płynnie przechodziły. Tzn ich wielkość zmieniała się płynnie.
Nie wiem wogole jak sie do tego zabrać. Nowe zdjęcie wczytuje pobierając atrybut "alt" z juz istenijącej fotki miniaturki . i ten atrybut wczytuje do diva "fotka_wczytana" poprzez .html() . - ogolnie to chyba zle się za to zabrałem . Dlatego zerknijcie na kod i podpowiedzcie jak to zrobić prawidło. Najlepiej jakby się dalo wczytać nową fotke gdzieś w tle- pobrac jej szerokość, wysokość i zmienić poprzez .animate wielkość diva "fotka_wczytana" a nastepnie wyswietlnić w niej dany img.
tutaj przykład klik
$("#galeria img").click( function(){ var alt = $(this).attr('alt'); $('.aktualne_img').removeClass(); $(this).addClass('aktualne_img'); pokaz_obraz(alt); }); function pokaz_obraz($a) { var link = $a; if (!$("#gallery")) { } else { $("#gallery").fadeIn(500); $("#exposeMask").fadeIn(500); } $("#fotka_wczytana").hide(); $(".close").hide(); $("#gallery").hide(); var nextSiblings = $('.aktualne_img').next('img'); var prevSiblings = $('.aktualne_img').prev('img'); if (nextSiblings.length > 0) { $('.next').css("display", "block"); } else { $('.next').css("display", "none"); } if (prevSiblings.length > 0) { $('.prev').css("display", "block"); } else { $('.prev').css("display", "none"); } var opis = $(".aktualne_img").attr("longdesc"); var tekst_img = '<img src="' + link + '"/>'; var ekran_h2 = $(window).height() - 50; $("#fotka_wczytana").html(tekst_img); $('#fotka_wczytana img').load(function() { $("#gallery").show(); $("#fotka_wczytana").show(); $(".close").show(); var img_h = $("#fotka_wczytana").height(); var ekran_h = $(window).height(); var ekran_w = $(window).width(); if(ekran_h2 < img_h ){ $("#fotka_wczytana img").css("height", ekran_h2); } else{ $("#fotka_wczytana img").css("height", img_h); } var img_w = $("#fotka_wczytana").width(); var margines = (ekran_w - img_w) / 2; $("#info").html(opis); $("#gallery").css("left", margines); }); $(".next").click(function() { var next_img = $(".aktualne_img").next("img").attr("alt"); var next_img_remove = $(".aktualne_img").next("img"); $(".aktualne_img").removeClass(); $(next_img_remove).addClass("aktualne_img"); pokaz_obraz(next_img); }); $(".prev").click(function() { var prev_img = $(".aktualne_img").prev("img").attr("alt"); var prev_img_remove = $(".aktualne_img").prev("img"); $(".aktualne_img").removeClass(); $(prev_img_remove).addClass("aktualne_img"); pokaz_obraz(prev_img); });
<div id="gallery" class="simple_overlay" style=" padding-bottom:0px; position: absolute; display: none; z-index: 10007; top: 20px;left:200px; background-image: url(./img/bg_gal.png); background-repeat: repeat;"> </div> <div style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; display: none; z-index: 10000; background-image: url(./img/bg_gal.png); background-repeat: repeat;" id="exposeMask">