На этом шаге мы рассмотрим реализацию механизма скрытия увеличенного изображения.
Нам необходим механизм удаления увеличенного изображения обложки после его отображения. Самый простой способ заключается в том, чтобы с помощью эффекта растворения скрыть его по событию click:
// Центральное изображение; увеличенная версия.
$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()
.one('click', function() {
$enlargedCover.fadeOut();
});
event.preventDefault();
})
.hover(function() {
$enlargeRollover.appendTo(this).show();
}, function() {
$enlargeRollover.hide();
});
Для подключения обработчика этого события click мы использовали метод .one(), который позволяет обойти сразу пару потенциальных проблем. При подключении обработчика обычным методом .bind() пользователь сможет щелкнуть на изображении еще раз в процессе воспроизведения эффекта растворения, что приведет к повторному вызову обработчика события. Кроме того, так как для отображения увеличенных версий изображений используется один и тот же элемент, при каждом его отображении будет производиться подключение обработчика. Если не выполнять отключение обработчика вручную, со временем это приведет к накоплению целой стопки обработчиков. Метод .one() гарантирует, что обработчик будет отключен сразу же после первого его использования.
Рис.1. Увеличенное изображение скрывается по щелчку на нем
Полный текст этого примера можно взять здесь.На следующем шаге мы рассмотрим отображение кнопки закрытия.
