Изменение размеров изображения с помощью jQuery

Добрый день, хочу предложить вам довольно простой, но от этого не менее эффектный урок по изменению размеров картинки с помощью слайдера (бегунка). Для начало давайте разберемся с чем мы будем иметь дело.

Демо

Скачать исходный код

Первое с чего стоит начать это подключение JQuery, качаем тут.

Второй шаг подключение jQuery UI - это очень полезная надстройка над JQuery, в данном случае нам необходим виджет Slider. Скачать его можно здесь, главное не забудьте убрать (Deselect all). Все остальные галочки кроме Slider и UI Core, иначе рискуете получить огромный и бесполезный (для данного урока) файл.

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

Подключаем:

<link type="text/css" href="css/slider.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>

HTML разметка нашего документа максимально простая.

Два элемента формы input, в которых будут выводиться данные о размере картинки, а точнее ширина и высота:

<label for="amount">Width:</label>
<input type="text" id="amount" value="" style="border:0; width:30px; color:#f6931f; font-weight:bold;" />
<label for="amount2">Height:</label>
<input type="text" id="amount2" value="" style="border:0; width:30px; color:#f6931f; font-weight:bold;" />

Собственно сам слайдер (или бегунок, кому как больше нравится)

<div id="slider" style="height:6px; width:220px; "></div>

И конечно изображение над котором мы будем работать (реальный размер изображения 666 x 1000 px )

<div id="images" style="margin-top:40px"></div>

Внимание! При добавлении картинки обязательно необходимо прописывать у нее атрибуты width и height.

Теперь сам JQuery:

<script type="text/javascript">
$(function() {
var width = $("#images img").attr("width");
var height = $("#images img").attr("height");
z = width/height;
$("#slider").slider({
orientation: "horizontal",
min: 100,
max: 666,
value: width,
slide: function(event, ui) {
y = Math.round(ui.value/z);
$("#amount").val(ui.value);
$("#amount2").val(y);
$('#images img').width(ui.value);
$('#images img').height(y);
}
});
$("#amount").attr('value',width);
$("#amount2").attr('value',height);
});
</script>

Давайте по порядку разберемся, что же мы сделали:

var width = $("#images img").attr("width");
var height = $("#images img").attr("height");

- с помощью команды attr() получаем значение атрибутов нашей картинки width и height и присваиваем их соответствующим переменным.

z = width/height;

- определяем соотношение сторон картинки - ширины к высоте. Это поможет нам правильно пропорционировать ее на страничке.

$("#slider").slider({

привязываем виджет Slider к html разметки, а конкретно к нашему <div id="slider">

orientation: "horizontal",
min: 100,
max: 666,
value: width,

- настраиваем слайдер под наши требования:
orientation – положение на странице, может принимать два значения "horizontal" и "vertical"
min и max - минимальное и максимальное значения шкалы (задать можно любое, при реальном использовании на сайте рекомендую привязать его к максимальному размеру картинки)
value - определяет первоначальное положение бегунка, присваиваем ему значение переменной width (а вообще это может быть любое числовое значение в пределах min и max)

slide: function(event, ui) {

- события на которые реагирует бегунок

y = Math.round(ui.value/z);

- так как ui.value - текущее значение на опции value, а оно привязано к атрибуту width (ширина картинки), то для определения высоты нам необходимо провести простое арифметическое действие поделить текущее значение widht на z, которая как вы помните является соотношением сторон картинки. И округляем полученное значение с помощью функции Math.round.

$("#amount").val(ui.value);
$("#amount2").val(y);

- команда val() применяется для получения доступа к значениям из элементов формы.

$('#images img').width(ui.value);
$('#images img').height(y);

- тут самое главное, изменяем ширину и высоту самой картинки прямо на странички при помощи команд width() и height()

$("#amount").attr('value',width);
$("#amount2").attr('value',height);

- и наконец для визуального просмотра размера картинки меняет значения value в элементах формы на соответствующие, то есть ширину и высоту, при необходимости данные о выставленных размерах можно отправлять на сервер для дальнейшей обработки.