Простая адаптивная галерея изображений на JavaScript

Дата публикации: 2015-12-25

От автора: в этой статье давайте создадим галерею на JavaScript. Простая адаптивная галерея изображения на JavaScript, именно об этом пойдет речь в данной статье.

Параметры изображения

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

Присвоить изображениям одинаковые имена, но хранить их в разных папках: thumbnails и fullsize. Лучший вариант для сайтов с большим количеством ресурсов. Мы пойдем этим путем.

Присвоить изображениям разные имена и хранить их вместе: к примеру newyork-full.jpg (большое) and newyork.jpg (превью). В CodePen демо в нашей статье используется этот способ.

Разметка

Разметка почти такая же, как в предыдущих примерах:

<div id="gallery">
    <div id="thumbs">
        <input type="image" src="thumbnails/desert.jpg" alt="A broad and empty desert">
        <input type="image" src="thumbnails/watchtower.jpg" alt="An empty watchtower on the edge of the Grand Canyon">
        <input type="image" src="thumbnails/namib.jpg" alt="Pools of salt in the Namib Desert">
    </div>
    <figure>
        <img src="fullsize/desert.jpg" alt id="fullsize">
        <figcaption>A broad and empty desert</figcaption>
    </figure>
</div>

</div>

<figcaption>A broad and empty desert</figcaption>

</figure>

</div>

Необходимо представить перед пользователем полноразмерные изображения по умолчанию; это не только облегчит код JavaScript, но также пользователю хоть будет на что смотреть: удивительно, как много веб-дизайнеров думают, что пользователи всегда нажимают на превью. (на самом деле никто не нажимает на превью).

Поля input типа image позволяют перемещаться между изображениями при помощи клавиатуры, а, следовательно, поля становятся доступными. Также в состоянии hover появляются подсказки по навигации. Удивительно, но данные поля также поддерживают атрибут srcset для Retina изображений. (Рассмотрим ниже).

CSS

Проще всего создать галерею с помощью flexbox:

body { background: #111; color: #fff; }
div#gallery { display: flex; flex-direction: column; }
div#gallery div > input { width: 33%; }
div#gallery figure img { width: 100%; }

body { background: #111; color: #fff; }

div#gallery { display: flex; flex-direction: column; }

div#gallery div > input { width: 33%; }

div#gallery figure img { width: 100%; }

Результат можно посмотреть в начале статьи.

Скрипт

Добавьте в самый конец страницы:

var caption = document.querySelector("#gallery figcaption"),
thumbs = document.getElementById("thumbs"),
fullsize = document.getElementById("fullsize");
thumbs.addEventListener("click", function(e) {
    var filename = e.target.src.split("/").pop();
    fullsize.src = "fullsize/"+filename;
    caption.innerHTML = e.target.alt;
})

var caption = document.querySelector("#gallery figcaption"),

thumbs = document.getElementById("thumbs"),

fullsize = document.getElementById("fullsize");

thumbs.addEventListener("click", function(e) {

var filename = e.target.src.split("/").pop();

fullsize.src = "fullsize/"+filename;

caption.innerHTML = e.target.alt;

})

Пояснение: после определения необходимых элементов при помощи распространения события скрипт определяет, на какую превьюшку был совершен клик пользователем. Путь к полноразмерному изображению получается при помощи разбиения имени превью по символу «/», результат сохраняется в массиве, а последний элемент массива вытягивается, и к нему добавляется строка «fullsize/». В атрибуте alt в превью изображения указывается текст для полноразмерного изображения.

Если текст alt отличается от figcaption – часто бывает – то можно воспользоваться атрибутом data и создать data-caption для каждой превьюшки, в скрипте считывать текст и создавать заголовки для полноразмерных картинок при помощи dataset.

caption.innerHTML = e.target.dataset.caption;

1	caption.innerHTML = e.target.dataset.caption;

Именно этот способ мы используем в демо на Codepen. Если необходима большая поддержка в браузерах (с IE10 и ниже не поддерживается dataset), можно воспользоваться getAttribute:

caption.innerHTML = e.target.getAttribute("data-caption")

1	caption.innerHTML = e.target.getAttribute("data-caption")

Добавляем поддержку Retina

Добавить поддержку HiDPI изображений довольно-таки просто. Инпуты необходимо заменить на:

<input type="image" src="thumbnails/delicate-arch-moab.jpg"
srcset="thumbnails/delicate-arch-moab-2x.jpg 2x" 
alt="Delicate Arch, Arches National Park, Moab, Utah">

<input type="image" src="thumbnails/delicate-arch-moab.jpg"

srcset="thumbnails/delicate-arch-moab-2x.jpg 2x"

alt="Delicate Arch, Arches National Park, Moab, Utah">

А в скрипте необходимо задавать оба значения src и srcset для полноразмерных изображений:

var filename = e.target.src.split("/").pop();
var fileNameArr = filename.split(".");
fullsize.src = "fullsize/"+fileNameArr[0]+"."+fileNameArr[1];
fullsize.srcset = "fullsize/"+fileNameArr[0]+"-2x."+fileNameArr[1]+" 2x";

var filename = e.target.src.split("/").pop();

var fileNameArr = filename.split(".");

fullsize.src = "fullsize/"+fileNameArr[0]+"."+fileNameArr[1];

fullsize.srcset = "fullsize/"+fileNameArr[0]+"-2x."+fileNameArr[1]+" 2x";

В этом случае в пути изображения отсекается его расширение; путь к изображению заново собирается для удвоенных изображений 2х (fullsize/moab-2x.jpg).

Ограничения и недостатки

Помимо своей эффективности, в данном методе есть и недостатки:

К данному методу нельзя применить технику прогрессивного улучшения; если пользователь выключит JS, он не увидит полноразмерные изображения кроме первого. В следующей статье есть способы решения данной проблемы.

На странице отсутствует история действий пользователя, хотя ее можно добавить через History API.

В отличие от PHP метода, нельзя направить пользователя на конкретное изображение через ссылку, можно лишь считывать URL из браузера.

Источник: //thenewcode.com/

Редакция: Команда webformyself.

Метки: галерея