Форум сайта MyRusakov.ru

Здравствуйте! Имеется такая задача-при наведении на миниатюру картинки, извлекается путь большого изображения и через метод $(выборка окна просмотра).attr("src", "путь к большой картинке" подставляется в окно просмотра изображения, которое имеет фиксированный формат (допустим 250*250)-это все я сделал. Далее должна сработать функция подгонки размера и центровки большого изображения в окне просмотра изображения. Эту функцию я написал - function centerFoto(w_foto, h_foto)-она принимает ширину и высоту НОВОЙ картинки, пропорционально уменьшает эту картинку, чтоб она влезла в окно просмотра изображения (250*250px) без искажения, ну и последним этапом функция центрует полученное фото в окне просмотра. Задача вроде бы легкая, функция тоже работает отлично, НО при тестировании обнаружил следующую проблему: когда я навожу мышь на миниатюру - меняется путь к картинке и в окне просмотра отображается новое изображение, после этого срабатывают свойства $(выборка окна просмотра).width() и $(выборка окна просмотра).height()-которые должны вернуть исходную высоту и ширину НОВОЙ картинки, а они почему-то возвращают ширину и высоту изображения, которое стояло ПЕРВОНАЧАЛЬНО в окне просмотра. То если, допустим, при загрузке странице первоначально в окне просмотра изображения стояло фото размером 250*150, и мы его заменяем через attr("src" на новую картинку с размерами 180*250px, и после этого проверяем свойства width() и height(), то они нам выдадут 250*150px, а не 180*250px! При чем при повторном наведении на миниатюру, нормально выдаются размеры 180*250px. В чем может быть дело? Может не успевает обновиться DOM - дерево при смене атрибута attr-хотя я пробовал использовать setTimeout() для решения этой проблемы-но все равно безуспешно. Подскажите пожалуйста?

Надо менять не только src, но ещё и width с height. Сделать это можно не заменой одного src, а удалением одного img и вставкой нового img с нужным src, тогда размеры должны быть как у нового изображения.

Спасибо, помог ваш совет!

Приветствую, еще раз! Возвращаюсь к своей проблеме - использовал ваш совет и все заработало, но только в браузере Explorer, в FireFox и в Chrome по прежнему неправильно определяются высота и ширина. Привожу часть кода с комментариями для анализа:

//При наведении на одну из миниатюр вызываем анонимную функцию
$(".gallery_min > ul > li img".mouseenter(function() {
//извлекаем ссылку на НОВОЕ БОЛЬШОЕ изображение и сохраняем его в переменной link
var link = $(this).parent().attr("href";
//удаляем изображение В ОКНЕ ПРОСМОТРА шириной и высотой в 250 px (как вы и советовали)
$(".gallery_main > a > img".remove();
//вставляем НОВОЕ изображение в окно просмотра шириной 250px (высота пропорционально подстраивается браузером и может быть больше или меньше 250px)
$(".gallery_main > a".html('<img src="'+link+'" width="250" />');
// проверяем высоту и ширину НОВОГО изображения
alert($(".gallery_main > a > img".height()+"+"+$(".gallery_main > a > img".width());
});

В итоге alert()выдает нам 0+250, то есть высота новой картинки 0, а ширина 250px. То есть ширину картинки JAvaScript нам выводит из атрибута width="250". Но почему он не выдает высоту новой картинки? При чем если навестит на миниатюру 2 раз, то все НОРМАЛЬНО-выводиться пропорционально подставленная браузером высота и ширина 250px! В браузере Explorer все нормально работает

html('<img src="'+link+'" width="250" />'); - надо ещё указывать высоту.

Как я поставлю высоту, если она мне не известна?! Попытаюсь объяснить подробно. Допустим имеются 2 фото- одна миниатюра 60*60px(вырезанная часть из большого фото) и большое фото 500*400px. На сайте показывается список таких миниатюр и имеется окно просмотра изображения размером 250*250px. После наведения на миниатюру, в окно просмотра изображение должно подставиться большое изображение БЕЗ ИСКАЖЕНИЯ (то есть здесь я и поставил в атрибуте ширину 250, а высота подбирается пропорционально браузером). То есть в нашем случае высота будет такая: (250/500)*400=200px. Но это я сейчас смог подсчитать высоту, а если у меня 100 больших изображений и у каждого разные высоты и ширина? Как мне узнать истинные размеры фото при подстановки его в HTML код?

img.onload = function(){
alert(img.height);
} - нужно вот это прикрутить, то есть после загрузки (событие load), вызывать height.

Всё заработало! Спасибо!