🏠

Галерея JS

Фото галерея на javascript для сайта - лучшее решение из всех галерей изображений. И когда материализуется острая необходимость быстро поставить галерею которая легко работает, то: адаптивная галерея с подгрузкой легких изображений()=>Гитхаб с галереей версии три.

галерея ссылкой на гитхаб
Пример работы адаптивной галереи на JS

!!! в скрипте галереи IMG < - это объект из json в котором расфасованы все изображения.

Script Gallery

document.addEventListener("DOMContentLoaded",GoClick);
window.addEventListener("hashchange",GoClick);
document.querySelector('img').addEventListener('click',Plus);
let CountClick=+0;
function Plus(){
CountClick++;
if(CountClick>=IMG.length){
CountClick=0;
}
for(let newi=0;newi<IMG.length;newi++){
if(IMG[newi].count==CountClick){
document.querySelector('img').src=IMG[newi].src;
document.querySelector('img').setAttribute('alt',IMG[newi].alt);
document.querySelector('img').setAttribute('title',IMG[newi].title);
window.location.hash='#'+IMG[newi].hash;
}
}
}

function GoClick(){
for(let aj=0;aj<IMG.length;aj++){
if(window.location.hash=='#'+IMG[aj].hash){
document.querySelector('img').src=IMG[aj].src;
document.querySelector('img').setAttribute('alt',IMG[aj].alt);
document.querySelector('img').setAttribute('title',IMG[aj].title);
if(IMG[aj].srcset=={}){
}else{
document.querySelector('img').srcset=IMG[aj].srcset;
}
}
}
}

Один из способов адаптировать изображение под все устройства это подгружать аяксом html файл с легким форматом webp с форматами поддерживающими браузер сафари. т.к. у сафари свой формат легких изображений, но он только для эппл, для всех остальных нет. И костылея “галерея на костылях” - прекрасно справлялась со всеми форматами. Только для каждой картинки приходилось создавать целый файл и собирать массив этих файлов для перебора как галереи.

У галереи третьей версии из преимуществ это доступное место для WEBP изображений. И самое главное неограниченное количество фотографий можно сортировать через json. И расфасовка применяется для установки на сайт через скрипт. Этот скрипт сам отобразит пути на фотографии через джейсон и все покажет в лучшем виде. А собрать фотографии и конвертировать в любой формат можно на любом языке программирования(даже зашифрованной каллиграфией другого вида). Галерея версии три фактически работает только через json.

Шикарные кнопки для фотогалереи и как сделать листалку по клик Button вперед назад. Кнопки для фото галереи.

Ссылка на гитхаб прилагается, в добавление мой профиль на гитхабе: Amir Navrutdinov Если шо. Ищу работу: html coder{a}! Основной стек: html, css, js! Немного php,mySQL. Еще пару строк на вью. O_o Верстка адаптивного сайта, с SEO оптимизацией, продвижением в контекстной рекламе. Доработки, исправление уже существующих с основным стеком html,css,js.

На главную страницу BloZhik{a}!

Сайт работает на быстром хостинге со встроенным кэшем.

the best hosting

Система комментирования SigComments