|
|
Иван!
Функции нет, но её можно написать:
<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
);
}
);
В жизни:
Сжатие картинки с приемлемым качеством возьмёт на себя браузер.
Обратите внимание: я добавил тегу 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
);
}
);
Есть вариация этой техники для гурманов. Она полезна, если вам нужно сделать размер изображения зависимым от размера окна браузера. Для этого помимо самого маленького и самого большого размера изображения, надо сделать ещё несколько с шагом, скажем, 200 пикселей. Тогда, при изменении размера окна вы сможете загружать подходящее по размеру изображение. Если на обычном экране непросто заметить разницу между браузерным и «фотошопным» сжатием, то на «Ретине» это бросится в глаза.
|
|
Похожая техника используется в «Дизайн-собаке».
|
|