На этом шаге мы рассмотрим отображение цены выбранной книги.
В исходной разметке HTML у нас имеется информация о стоимости книг, и мы можем отобразить эту дополнительную информацию поверх увеличенного изображения обложки книги. Мы воспользуемся приемом, который был разработан для кнопки Close, но на этот раз для отображения текстовой информации, а не изображения.
И снова в самом начале программного кода JavaScript мы создаем одиночный элемент:
var $priceBadge = $('<div/>')
.addClass('enlarged-price')
.css('opacity', 0.6)
.css('display', 'none')
.appendTo('body');
Так как ценник будет частично прозрачным, лучше использовать высококонтрастную комбинацию цветов шрифта и фона:
.enlarged-price {
background-color: #373c40;
color: #fff;
width: 80px;
padding: 5px;
font-size: 18px;
font-weight: bold;
text-align: right;
position: absolute;
z-index: 6;
}
Прежде чем мы сможем отобразить ценник, нам необходимо заполнить его действительной информацией из разметки HTML. Внутри обработчика события click центрального изображения ключевое слово this ссылается на элемент ссылки. Поскольку цена определяется элементом <span>, находящимся внутри ссылки, получить текст не представляет труда:
var price = $(this).find('.price').text();
Теперь вместе с увеличенной версией изображения обложки можно отобразить и ценник:
$priceBadge
.css({
'right': ($('body').width() - 360) / 2,
'top' : 100
})
.text(price)
.show();
Этот вызов отобразит ценник в правом верхнем углу увеличенного изображения, как показано на рисунке 1.
Рис.1. Ценник отображается в правом верхнем углу увеличенного изображения
Полный текст этого примера можно взять здесь.Как только мы поместим вызов метода $priceBadge.hide(); в обработчик события click увеличенного изображения, чтобы скрыть ценник в нужный момент времени, работу можно будет считать законченной.
На следующем шаге мы рассмотрим анимацию увеличения изображения.
