На этом шаге мы рассмотрим механизм увеличения изображения.
Теперь наша галерея обладает всей полнотой функциональности. Карусель дает пользователю возможность перемещаться между изображениями. Щелчок мышью на центральном изображении вызывает переход на страницу с увеличенной версией изображения. Но мы можем расширить функциональность увеличения размера этого изображения.
Вместо того чтобы в результате щелчка на центральном изображении перемещать пользователя на другую страницу, мы можем отобразить увеличенное изображение обложки книги прямо поверх страницы.
Примечание. Существует множество реализаций функции отображения информации поверх страницы в виде модулей расширения для библиотеки jQuery. В число наиболее популярных входят: FancyBox, ShadowBox, Thickbox, SimpleModal и jqModal.
Для отображения увеличенной версии необходим новый элемент изображения, который можно создать в тот же момент, когда создаются ярлыки:
var $enlargedCover = $('<img/>')
.addClass('enlarged')
.hide()
.appendTo('body');
Мы определим для этого нового класса ряд правил оформления, напоминающих те, что мы уже видели на предыдущих шагах:
img.enlarged {
position: absolute;
z-index: 5;
cursor: pointer;
}
Благодаря тому, что увеличенная версия изображения имеет абсолютное позиционирование, а значение его свойства z-index больше значений этого же свойства других элементов, мы сможем помещать его поверх других изображений. Теперь нам необходимо выполнить фактическое позиционирование увеличенного изображения в момент, когда будет выполнен щелчок мышью на центральном изображении в карусели:
// Центральное изображение; увеличенная версия.
$covers.eq(1)
.css('left', spacing)
.click(function(event) {
$enlargedCover.attr('src', $(this).attr('href'))
.css({
'left': ($('body').width() - 360) / 2,
'top' : 100,
'width': 360,
'height': 444
})
.show();
event.preventDefault();
})
.hover(function() {
$enlargeRollover.appendTo(this).show();
}, function() {
$enlargeRollover.hide();
});
Чтобы узнать, где на сервере находится увеличенное изображение обложки, мы можем использовать ссылки, которые уже присутствуют в разметке HTML. Мы извлекаем его из атрибута href ссылки и устанавливаем в качестве значения атрибута src элемента с увеличенной версией изображения.
Теперь необходимо выполнить позиционирование изображения. Сейчас значения свойств top, width и height жестко определены в программном коде, но, чтобы задать значение свойства left, требуется выполнить некоторые вычисления. Нам нужно, чтобы увеличенное изображение отображалось в центре страницы, но нам заранее не известно значение соответствующей координаты, которое удовлетворит нашему требованию. Мы можем определить горизонтальную координату середины страницы, определив ширину элемента <body> и разделив ее пополам. Увеличенное изображение будет простираться влево и вправо от этой точки на половину своей ширины, поэтому значение свойства left изображения вычисляется как ($('body').width() - 360) / 2, где 360 - это ширина увеличенного изображения обложки. Теперь изображение позиционируется, как требуется, в центре страницы по горизонтали, как показано на рисунке 1.
Рис.1. Увеличенное изображение позиционируется в центре страницы по горизонтали
Полный текст этого примера можно взять здесь.На следующем шаге мы рассмотрим сокрытие увеличенного изображения.
