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

13

Від автора: у цій статті давайте створимо галерею на JavaScript. Проста адаптивна галерея зображення на JavaScript, саме про це піде мова в даній статті.

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

Як і в іншому прикладі галереї зображень, нам знадобиться дві версії одного зображення: мініатюрки і повнорозмірне фото. В такому разі у нас є два варіанти:

Присвоїти зображень однакові імена, але зберігати їх в різних папках: thumbnails і fullsize. Кращий варіант для сайтів з великою кількістю ресурсів. Ми підемо цим шляхом.

Присвоїти зображень різні імена і зберігати їх разом: наприклад newyork-full.jpg (велике) and newyork.jpg (прев’ю). У CodePen демо в нашій статті використовується цей спосіб.

Розмітка

Розмітка майже така ж, як у попередніх прикладах:

Необхідно представити перед користувачем повнорозмірні зображення за замовчуванням; це не тільки полегшить код 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%; }

Результат можна подивитися на початку статті.

Скрипт

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

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;

Саме цей спосіб ми використовуємо в демо на Codepen. Якщо необхідна велика підтримка в браузерах (з IE10 і нижче не підтримується dataset), можна скористатися getAttribute:

caption.innerHTML = e.target.getAttribute(«data-caption»)

Додаємо підтримку Retina

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

А в скрипті необхідно задавати обидва значення 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»;

У цьому випадку в дорозі зображення відсікається його розширення; шлях до зображення заново збирається для подвоєних зображень 2х (fullsize/moab-2x.jpg).

Обмеження і недоліки

Крім своєї ефективності, в даному методі є і недоліки:

До даного методу не можна застосувати техніку прогресивного поліпшення; якщо користувач вимкне JS, він не побачить повнорозмірні зображення крім першого. У наступній статті є способи рішення даної проблеми.

На сторінці відсутній історія дій користувача, хоча її можна додати через History API.

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