Пример №4. Фотогалерея

Мы хотим, чтобы на странице сайта были размещены две или несколько статей с иллюстрациями. Иллюстрации относятся к конкретной статье и их несколько, но в каждый момент показывается только одна, но с помощью кнопок вперед-назад можно просматривать все иллюстрации. Эту задачу мы можем решить с помощью галереи jQuery. Рассмотрим наш HTML пример.

Макет страницы

Создаем HTML документ, в котором выделено 2 блока (статьи article), в каждой статье есть абзац с текстом и иллюстрацией. С помощью таблиц стилей задается стиль для заголовков статей.

Разработка интерфейса (HTML и CSS)

Листинг HTML

<html>
<head>
<script src="jquery-1.6.3.min.js"></script>
<script type='text/javascript' src='foto.js'></script>
<link rel="stylesheet" href="style.css"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="text2">
<p><em><strong>Фотогалерея</strong></em></p>
</div>
<div id="all">
<article data-ar_number='1'>
<img src="46.jpg" width="250" height="250" name="new1" />
</article>
<br>
&nbsp
<article data-ar_number='2'>
<img src="48.jpg" width="250" height="250" name="new2" />
</article>
</div>
</body>
</html>

Листинг CSS

#all{
#text2 {
margin-left: 30px;
font-size: 25px;
color: black;
}
#all{
margin-left: 20px;
width: 550px;
}

С помощью кода jQuery сначала создаем массивы со списком фотографий, в конец каждой статьи добавляем кнопки вперед и назад. Затем выбираем все кнопки, связываем их с помощью событий click с функцией обработки событий. Эта функция определяет к какой статье относится кнопка, т.е. с каким массивом необходимо работать и рассчитывает индекс элемента массива, который нужно показать на странице, и на конец обновляется атрибут src тега img.

Добавление интерактивности

Листинг jQuery

$(document).ready(function(){
var Banners = new Array ('46.jpg', '45.jpg', '48.jpg');
var CurrentBanners = 0;
var Banner = new Array ('48.jpg', '46.jpg', '45.jpg');
var CurrentBanner = 0;
// создание кнопок
$('article').each(function(){
$(this).append(
"<br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp"
).append(
"<input type='button' value='Назад'
data-ForwardBack='-1' class = 'btn'\>"
).append(
"<input type='button' value='Вперед'
 data-ForwardBack = '1' class ='btn'\>"
);
}); // конец добавления кнопок
// добавление событий к кнопкам
$('.btn').click(function(){
$(this).parent().attr("data-ar_number")
// определяем номер массива
var a = $(this).parent().attr("data-ar_number");
// определяем значение атрибута data-ForwardBack и
//преобразуем его в число
var b = Number($(this).attr("data-ForwardBack"));
if (a == 1){
CurrentBanners = CurrentBanners + b;
if (CurrentBanners > (Banners.length - 1)){
CurrentBanners = 0;
}
//alert (CurrentBanners);
if (CurrentBanners < 0){ CurrentBanners = (Banners.length - 1); }					 $(this).siblings('img').attr('src',Banners[CurrentBanners])			 }else{ CurrentBanner = CurrentBanner + b; if (CurrentBanner > Banner.length-1){
CurrentBanner = 0;
}
if (CurrentBanner < 0){
CurrentBanner = Banner.length-1;
}
$(this).siblings('img').attr('src',Banner[CurrentBanner])
};
}); // конец добавления событий
}); // конец ready

Контрольные вопросы

  • Как определяется имя массива, к которому относится кнопка?
  • Как определяется направление перемещения по фотогалереи (Вперед/Назад)?
  • Как обновляется изображение после щелчка?
  • Что делает функция append ()?
  • Что делает функция attr ()?
  • Что делает функция parent ()?
  • Что делает функция siblings ()?
  • Как добавляются кнопки?
  • Для чего можно использовать эту программу?