Форум

Vision · #1 (**permalink**) 07.07.2012, 22:00

Доброго времени суток. Есть следующая задачка. Имеется галерея из N фоток. Необходимо для каждого изображения в галерее пересчитать марджины в зависимости от ширины и высоты изображения. Чтобы получить реальный размер изображения пользуюсь следующим методом (накопал на просторах):

Код:

        var $imgl = $("img.stretch");
        //удаляем src для того чтобы сработал img.load (иначе кэш заблочит)
        var src  = $imgl.attr("src");
        $imgl.attr("src", "");
        $imgl.attr("src", src);
        // когда изображение загружено 
        $imgl.load(function() {
        // удаляем все width & height из стилей и аттрибутов
        $(this).removeAttr("width")
               .removeAttr("height")
               .css({ width: "", height: "" });
        // получаем родные width & height
        var iw  = $(this).width();
        var ih = $(this).height();
        // дальше идет требуемый пересчет
        ....
        });

чтобы пересчитать все изображения с классом .stretch пытался использовать конструкцию

Код:

$(".stretch").each(function () {
            var src  = $(this).attr("src");
            $(this).attr("src", "");
            $(this).attr("src", src);...

но она почему то в iw и ih возвращает 0. Может есть возможность, присвоив каждому изображению класса .stretch айди в стиле id="F_1", id="F_2"... перебрать все изображения для этого класса и для каждого айди выполнить пересчет. Я к сожалению не настолько силен в JS, поэтому прошу помощи в реализации этой идеи! Спасибо заранее

vadim5june · #2 (**permalink**) 07.07.2012, 22:27

попробуйте написать

$(".stretch").each(function () {
            var src  = $(this).attr("src");
            var $img=$(this);
            $img.attr("src", "");
            $img.attr("src", src);...

Vision · #3 (**permalink**) 07.07.2012, 22:38

не вижу особой разницы с тем что я написал, и результат соответственно тот же - 0
Для одного элемента класса .stretch я получаю нужное значение, для each - 0. Думаю проблема в множественном обращении $(this).load(function() { . Поскольку оно выполняется для каждого элемента класса .stretch и возникает какая то путаница. Как сделать цикл, который перебирает все элементы с id от F_1 до F_N и подтавляет вместо $(this) в load что то типа $("F_"+i).load.... ?

Deff · #4 (**permalink**) 07.07.2012, 22:50

Vision,
походу нун рыть computed style
(*хотя можно загружать в резиновый div с position:absolute;z-index:-100;
картинку <img src='Ccылка'/> и считывать размер картинки

vadim5june · #5 (**permalink**) 07.07.2012, 22:55

у меня так работает

<script>			
$(function(){
$(".stretch").each(function () {
         var src  =$(this).attr("src");
var $img= $(this);
 $img.attr("src", "");
      $img.attr("src", src);
$img.load(function() {
$(this).removeAttr("width").removeAttr("height").css({ width:"",height: 
"" });
var iw  = $(this).width();
var ih = $(this).height();alert(iw);
});
});
});	
</script>
<body><img class=stretch src=120.jpg 
width=100><img class=stretch src=22.png  width=100>

Deff · #6 (**permalink**) 07.07.2012, 23:00

vadim5june,
Ну имхо нет смысла изымать атрибуты - коли есть загруженная ссылка изо повторно не грузицо

vadim5june · #7 (**permalink**) 07.07.2012, 23:05

Сообщение от Vision

Как сделать цикл, который перебирает все элементы с id от F_1 до F_N и подтавляет вместо $(this) в load что то типа $("F_"+i).load.... ?

там главное чтобы this не было-поэтому я и ввел дополнительную переменную

Vision · #8 (**permalink**) 10.07.2012, 21:56

спасибо всем за ответы, в принципе все варианты чем то хороши)

Форум

Справочник

Discord чат

Курсы javascript