Галерея изображений на JavaScript

Функции:

  1. При клике на иконку изображения, расположенного в левой части галереи, это изображение в увеличенном формате появляется в расположенном справа основном блоке.
  2. Визуальный эффект: в неактивном состоянии каждая иконка выводится полупрозрачной. При наведении курсора на иконку, ее прозрачность становится равной нулю.

Для желающих как можно скорее убедиться в работоспособности предлагаемого кода, выкладываю файлы: 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му пути. Для этого:

  1. Найдем <img> с большим изображением и присвоим ему id:
    2. <div class="img-container">
    <img src="img1.jpg" id="bigImg">
</div>
  2. Найдем блок с иконками и повесим на него событие onclick:
    3. <div class="product-icons" onclick="showImg(event)">
  3. Создадим функцию showImg(event) в конце html-файла перед закрывающимся тегом <body>
    4. <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».

Добавить комментарий