<MyRusakov.ru />

Создание и раскрутка сайта от А до Я

Создание и раскрутка сайта от А до Я

Видеокурс "Создание и Раскрутка сайта от А до Я" - это 246 видеоуроков общей продолжительностью более 50-ти часов по теме создания, размещения в Интернете и раскрутке сайта.

В уроке рассмотрены следующие необходимые любому профессиональному Web-мастеру языки: HTML, CSS, JavaScript, PHP, SQL (с использованием MySQL) и XML.

Помимо этого в Видеокурсе рассматривается самая популярная система управления контентом - Joomla.

Также в Видеокурсе "Создание и Раскрутка сайта от А до Я" показывается весь процесс создания реального сайта - MyRusakov.ru. Затем демонстрируется его размещение в Интернете, а также последующая раскрутка. Всё это записывается, и Вам остаётся лишь просто повторить, чтобы стать владельцем своего собственного сайта!

И, наконец, почти к каждому уроку идут упражнения, которые позволяют закрепить полученные знания из урока уже на практике.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

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

Проблемы со свойствами height() и width()
17.05.2013 10:08:06 Проблемы со свойствами height() и width() Сообщение #1
sectors

sectors

Новичок

Новичок

Дата регистрации:
17.05.2013 09:31:01

Сообщений: 9

Здравствуйте! Имеется такая задача-при наведении на миниатюру картинки, извлекается путь большого изображения и через метод $(выборка окна просмотра).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() для решения этой проблемы-но все равно безуспешно. Подскажите пожалуйста?
Профиль Ответить
17.05.2013 11:22:06 Проблемы со свойствами height() и width() Сообщение #2
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

Надо менять не только src, но ещё и width с height. Сделать это можно не заменой одного src, а удалением одного img и вставкой нового img с нужным src, тогда размеры должны быть как у нового изображения.
Профиль Ответить
18.05.2013 08:37:20 Проблемы со свойствами height() и width() Сообщение #3
sectors

sectors

Новичок

Новичок

Дата регистрации:
17.05.2013 09:31:01

Сообщений: 9

Спасибо, помог ваш совет!
Профиль Ответить
19.05.2013 08:21:36 Проблемы со свойствами height() и width() Сообщение #4
sectors

sectors

Новичок

Новичок

Дата регистрации:
17.05.2013 09:31:01

Сообщений: 9

Приветствую, еще раз! Возвращаюсь к своей проблеме - использовал ваш совет и все заработало, но только в браузере 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 все нормально работает
Профиль Ответить
19.05.2013 10:55:26 Проблемы со свойствами height() и width() Сообщение #5
Admin

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

html('<img src="'+link+'" width="250" />'); - надо ещё указывать высоту.
Профиль Ответить
19.05.2013 12:19:25 Проблемы со свойствами height() и width() Сообщение #6
sectors

sectors

Новичок

Новичок

Дата регистрации:
17.05.2013 09:31:01

Сообщений: 9

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

Admin

Администратор

Администратор

Дата регистрации:
27.05.2010 21:23:42

Сообщений: 3063

img.onload = function(){
alert(img.height);
}
- нужно вот это прикрутить, то есть после загрузки (событие load), вызывать height.
Профиль Ответить
19.05.2013 13:56:16 Проблемы со свойствами height() и width() Сообщение #8
sectors

sectors

Новичок

Новичок

Дата регистрации:
17.05.2013 09:31:01

Сообщений: 9

Всё заработало! Спасибо!
Профиль Ответить