На этом шаге мы рассмотрим особенности отображения и использования этой кнопки.

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

  var $closeButton = createControl('images/close.gif')
    .addClass('enlarged-control')
    .appendTo('body');

    Когда на центральном изображении выполняется щелчок мышью и на странице отображается его увеличенная версия, нам необходимо позиционировать и отобразить кнопку:

        $closeButton
          .css({
            'left': ($('body').width() - 360) / 2,
            'top' : 100
          })
          .show();

    Координаты кнопки Close совпадают с координатами увеличенного изображения, потому что совпадают их верхние левые углы (рисунок 1 при отображении увеличенного изображения).

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

    // Центральное изображение; увеличенная версия.
    $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() {
            $closeButton.unbind('click').hide();
            $enlargedCover.fadeOut();
          });
        $closeButton
          .css({
            'left': ($('body').width() - 360) / 2,
            'top' : 100
          })
          .show()
          .click(function() {
            $enlargedCover.click();
          });
        event.preventDefault();
      })
      .hover(function() {
        $enlargeRollover.appendTo(this).show();
      }, function() {
        $enlargeRollover.hide();
      });

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

Рис.1. Использование кнопки Close (Закрыть)

    На следующем шаге мы рассмотрим отображение дополнительной информации.

Предыдущий шаг Содержание Следующий шаг