Галерея изображений на JavaScript
Функции:
- При клике на иконку изображения, расположенного в левой части галереи, это изображение в увеличенном формате появляется в расположенном справа основном блоке.
- Визуальный эффект: в неактивном состоянии каждая иконка выводится полупрозрачной. При наведении курсора на иконку, ее прозрачность становится равной нулю.
Для желающих как можно скорее убедиться в работоспособности предлагаемого кода, выкладываю файлы: gallery.zip. Файлы нужно распаковать в одну папку и добавить в эту же папку свои изображения с именами «img1.jpg», «img2.jpg», «img3.jpg».
Подробный рецепт:
Создадим файл файл gallery.html и добавим блок нашей будущей галереи, в котором разместим блок с иконками и блок с основным изображением. Заранее подумаем о красоте галереи и зададим классы созданным блокам:
<!DOCTYPE HTML>
<html lang="ru">
<head>
<title>Галерея изображений</title>
</head>
<body>
<div class="product"> <!-- блок с галереей изображений -->
<div class="product-icons"><!-- блок с иконками -->
</div>
<div class="img-container"><!-- блок с основным изображением -->
</div>
</div>
</body>
Отлично! Блоки для изображений подготовлены. А готовы ли сами изображения? Если да, то самое время расставить их по полочкам, то есть разложить по блокам, правильно прописав пути к папке в которой они располагаются. Для примера я взяла 3 изображения, назвав их «1.jpg», «2.jpg», «3.jpg» расположила их в той же папке, в которой находится html-файл:
<div class="product"><!-- размещаем последовательно иконки изображений -->
<div class="product-icons">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
</div>
<!-- размещаем первое фото в блоке с основным изображением -->
<div class="img-container">
<img src="img1.jpg">
</div>
Будем считать, что основа для галереи готова! Пришло время подкорректировать дизайн. И поможет нам в этом css — файл «styles.css». Создадим его и подключим к html-файлу:
<head>
<title>Галерея изображений</title>
<link rel="stylesheet" href="styles.css">
</head>
После подключения, откроем файл styles.css и добавим стили для иконок:
.product-icons img {
height: 150px;
display: block;
cursor: pointer;
border-bottom: 1px solid #ccc;
}
// Не забудем прижать иконки к левой части галереи:
.product-icons {
float: left;
}
// Ограничим высоту большого изображения и зададим рамку
.img-container img {
height: 422px;
display: block;
margin: 0 auto;
padding: 10px;
}
// Выровняем блок с основным изображением по левому краю и зададим внешние отступы
.img-container {
float: left;
margin: 10px;
width: 420px;
border: 1px solid #ccc;
}
// Зададим отступы контейнеру с галереей для более гармоничного вида из браузера:
.product {
margin: 30px;
}
Отлично! Галерея уже похожа на своего прародителя из превью. Однако, мы упустили небольшую деталь: давайте по-умолчанию зададим иконкам свойство непрозрачности opacity:
.product-icons img {
height: 130px;
display: block;
cursor: pointer;
border-bottom: 1px solid #ccc;
opacity: .6;
padding: 10px;
}
А при наведении курсора будем менять непрозрачность иконок до единицы:
.product-icons img:hover {
opacity:1;
}
Вот теперь с дизайном галереи, пора подключать JS!
Приступаем к реализации основного действа нашей затеи: добавим JS функцию, которая будет менять значение атрибута src тега <img> большого изображения на src выранной пользователем иконки. Вызов функции будет происходить каждый раз при клике пользователя по любой из иконок, расположенных в левой части галереи.
Таким образом, мы можем прописать событие onclick для каждой иконоки в теге <img> или повесить событие oncklick на весь блок с иконками и уже в функции проверять, был ли клик сделан по изображению, либо пользователь нажал на пустое место между иконками. Предлагаю пойти по 2му пути. Для этого:
- Найдем <img> с большим изображением и присвоим ему id:
- Найдем блок с иконками и повесим на него событие onclick:
- Создадим функцию showImg(event) в конце html-файла перед закрывающимся тегом <body>
<div class="img-container">
<img src="img1.jpg" id="bigImg">
</div>
<div class="product-icons" onclick="showImg(event)">
<script>
function showImg(event)
{
event = event || window.event; // получаем объект события
var iconImg = event.Target || event.srcElement; // определяем текущий объект
if (iconImg.tagName == "IMG"){ // если тип элемента - изображение, то
document.getElementById("bigImg").src = iconImg.getAttribute('src'); // меняем значение src у элемента с id="bigImg" на src текущего объекта
}
}
</script>
На этом работу над созданием галереи можно считать завершенной. Пришло время протестировать полученный результат! В расположенном ниже архиве вы можете скачать файлы с кодом готовой галереи изображений.
Файлы с кодом: gallery.zip. Файлы нужно распаковать в одну папку и добавить в эту же папку свои изображения с именами «img1.jpg», «img2.jpg», «img3.jpg».