Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.07.2012, 22:00
Интересующийся
Отправить личное сообщение для Vision Посмотреть профиль Найти все сообщения от Vision
 
Регистрация: 28.03.2012
Сообщений: 10

Расчет реальных размеров изображения в галерее
Доброго времени суток. Есть следующая задачка. Имеется галерея из 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, поэтому прошу помощи в реализации этой идеи! Спасибо заранее
Ответить с цитированием
  #2 (permalink)  
Старый 07.07.2012, 22:27
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

попробуйте написать
$(".stretch").each(function () {
            var src  = $(this).attr("src");
            var $img=$(this);
            $img.attr("src", "");
            $img.attr("src", src);...
Ответить с цитированием
  #3 (permalink)  
Старый 07.07.2012, 22:38
Интересующийся
Отправить личное сообщение для Vision Посмотреть профиль Найти все сообщения от Vision
 
Регистрация: 28.03.2012
Сообщений: 10

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

Последний раз редактировалось Vision, 07.07.2012 в 22:43.
Ответить с цитированием
  #4 (permalink)  
Старый 07.07.2012, 22:50
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

Vision,
походу нун рыть computed style
(*хотя можно загружать в резиновый div с position:absolute;z-index:-100;
картинку <img src='Ccылка'/> и считывать размер картинки
Ответить с цитированием
  #5 (permalink)  
Старый 07.07.2012, 22:55
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

у меня так работает
<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>
Ответить с цитированием
  #6 (permalink)  
Старый 07.07.2012, 23:00
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

vadim5june,
Ну имхо нет смысла изымать атрибуты - коли есть загруженная ссылка изо повторно не грузицо
Ответить с цитированием
  #7 (permalink)  
Старый 07.07.2012, 23:05
Аватар для vadim5june
Студент
Отправить личное сообщение для vadim5june Посмотреть профиль Найти все сообщения от vadim5june
 
Регистрация: 30.04.2012
Сообщений: 1,113

Сообщение от Vision Посмотреть сообщение
Как сделать цикл, который перебирает все элементы с id от F_1 до F_N и подтавляет вместо $(this) в load что то типа $("F_"+i).load.... ?
там главное чтобы this не было-поэтому я и ввел дополнительную переменную
Ответить с цитированием
  #8 (permalink)  
Старый 10.07.2012, 21:56
Интересующийся
Отправить личное сообщение для Vision Посмотреть профиль Найти все сообщения от Vision
 
Регистрация: 28.03.2012
Сообщений: 10

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Определение размеров изображения kondrat Events/DOM/Window 12 06.05.2009 13:05
Динамическое изменение размеров изображения Макс Элементы интерфейса 7 21.07.2008 16:55