Галерея изображений на 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».