x
 
Иван Курилко
6 декабря 2012

Дорогие советчики, возникла реальная потребность в вашем совете.

Имеется страница, на которой размещены блоки с картинками шириной 600 пикселей и произвольной высотой.

Но возникла проблема в том, что иногда нужно их быстро уменьшить до ширины в 300 пикселей. Есть ли возможность быстро решить этот вопрос с масштабированием? Может, есть какая-нибудь функция Яваскрипта для масштабирования картинок?



Иван!

Функции нет, но её можно написать:

<img class="largeThumbnail" src="london_bus_h600.png" width="430" height="600"
 data-smallWidth="215" data-smallHeight="300"
 data-normalWidth="430" data-normalHeight="600"
 data-state="normal" alt="London Bus" title="London Bus" />
$('.largeThumbnail').on('click',
	function()
	{
		var $this = $(this);
		var state = $this.attr('data-state');
		var newWidth, newHeight;
		switch (state)
		{
			case 'normal':
				newWidth = $this.attr('data-smallWidth');
				newHeight = $this.attr('data-smallHeight');
				$this.attr('data-state', 'small');
			break;
			case 'small':
				newWidth = $this.attr('data-normalWidth');
				newHeight = $this.attr('data-normalHeight');
				$this.attr('data-state', 'normal');
			break;
		}

		$this.animate(
			{
				width: newWidth,
				height: newHeight
			},
			300
		);
	}
);

В жизни:

London Bus

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

Обратите внимание: я добавил тегу img дополнительные атрибуты data-smallWidth и data-smallHeight, в которые на сервере записываю размеры уменьшенного изображения, которые потом использую в Яваскрипте.

Сложнее, если нужно сделать обратное: при клике увеличить изображение. Нам понадобятся две версии картинки: маленькая и большая. Маленькие мы загрузим вместе со страницей, а большие будем грузить по требованию. Чтобы это реализовать, растягиваем при клике уменьшенную картинку, а как только загрузится большая, сразу подменим ей маленькую.

<img class="smallThumbnail" src="london_bus_h300.png" width="215" height="300"
 data-smallWidth="215" data-smallHeight="300"
 data-normalWidth="430" data-normalHeight="600"
 data-state="small" alt="London Bus" title="London Bus" />
$('.smallThumbnail').on('click',
	function()
	{
		var $this = $(this);
		var state = $this.attr('data-state');
		var newWidth, newHeight;
		switch (state)
		{
			case 'normal':
				newWidth = $this.attr('data-smallWidth');
				newHeight = $this.attr('data-smallHeight');
				$this.attr('data-state', 'small');
			break;
			case 'small':
				newWidth = $this.attr('data-normalWidth');
				newHeight = $this.attr('data-normalHeight');
				$this.attr('data-state', 'normal');
			break;
		}

		var image = new Image();
		image.onload = function()
		{
			$this.attr('src', image.src);
		}
		image.src = 'http://artgorbunov.ru/bb/soviet/20121206/london_bus_h600.png';


		$this.animate(
			{
				width: newWidth,
				height: newHeight
			},
			300
		);
	}
);

London Bus

Есть вариация этой техники для гурманов. Она полезна, если вам нужно сделать размер изображения зависимым от размера окна браузера. Для этого помимо самого маленького и самого большого размера изображения, надо сделать ещё несколько с шагом, скажем, 200 пикселей. Тогда, при изменении размера окна вы сможете загружать подходящее по размеру изображение. Если на обычном экране непросто заметить разницу между браузерным и «фотошопным» сжатием, то на «Ретине» это бросится в глаза.

Похожая техника используется в «Дизайн-собаке».


P. S.
Это был совет о разработке сайтов. Хотите узнать всё об умной вёрстке, правильных скриптах, грациозной деградации, трюках и работе технолога с дизайнером? Присылайте вопросы.

Поделиться
Отправить

Комментарии

Андрей Ситник
6 декабря 2012

При увеличении изображения лучше не менять маленькую картинку на большую по onload, а просто положить большую версию сверху на маленькую. Тогда качество картинки будет улучшаться уже по мере загрузки большого изображения.

Серёжа Переверзев
6 декабря 2012

Добавлю, что normalWidth и normalHeight дублировать необязательно, их можно сохранить из исходных при первом нажатии.

Дмитрий Кравчик
6 декабря 2012

А зачем анимировать и ширину, и высоту картинки? Они анимируются не совсем синхронно, отчего форма кадра слегка подрагивает — не сильно, но всё же заметно. Достаточно менять только ширину, а высоту сделать auto.

Ну и, кроме того, анимацию я бы возложил на ЦСС3 — функциональной нагрузки она не несёт, это всего лишь визуальный эффект. Пользователи старых браузеров будут видеть просто мгновенное масштабирование.

Алексей Матвеев
8 декабря 2012

Небольшое дополнение: адрес картинки большого размера стоит указывать в атрибутах img. Например, атрибутом data-normalSrc.

Иван Курилко
11 декабря 2012

Огромное спасибо, я этот вопрос решил через ЦСС и подменой через скрипт. Но огромное спасибо за такой развёрнутый ответ.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

EM или REM? 6 Можно ли достичь эффекта переливания без встраивания видео на сайт? 1




Недавно всплыло

Практика: формулировка полезного действия 8 Иногда я спрашиваю о скидке для тренировки и потому что не против шанса сэкономить 1 Как вы проверяете соответствие вёрстки макету 2 Как избежать «эффекта Тильды»? 2