<MyRusakov.ru />

Фреймворк Yii 2.0 с нуля. Пример создания сайта

Фреймворк Yii 2.0 с нуля. Пример создания сайта

Видеокурс "Фреймворк Yii 2.0 с нуля. Пример создания сайта" обучит Вас созданию профессиональных сайтов с использованием фреймворка Yii. В курсе есть 2 раздела: теоретический и практический. В теоретическом разделе будут разобраны возможности фреймворка Yii с примерами их использования, а в практической части будет создан сайт Blog.MyRusakov.ru с помощью полученных знаний из теоретического раздела.

Так же почти ко всем урокам идут упражнения для закрепления материала из урока на практике.

После прохождения курса Вы без труда сможете создавать любые сайты с использованием фреймворка Yii, причём делать это будете быстро и качественно.

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

Подписавшись по 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

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