Простая фотогалерея на чистом javascript
Когда надо по быстренькому включить фотографии как фотогалерею, чтобы они перелистывались по клику.
Вариант галереи от 19 ноября 2021 Модифицированная галерея с отображением в интернете по якорю с альтом
Существует много навороченных технологий, но чтобы галерея открывалась по быстренькому и работала, можно обойтись одним javascript голыми руками и своей головой.
Gallery on JS
<picture>
<img src="images/P10721-081650.jpg" id="imge">
</picture>
<script>
let ok=+0;
document.querySelector('#imge').addEventListener('click',()=>{ // поставим прослушку события на клик
ok++; // плюсуем с каждым кликом к переменно одын!
if(ok==1){ // если переменная равна одному, то меняем ссылку изображения на новую ссылку с картинкой.
document.querySelector('#imge').src="images/P10721-081715.jpg"; // очень важно указать правильный путь файла, который ведет к изображению! О_о
}else if(ok==2){
document.querySelector('#imge').src="images/P10721-081650.jpg"; // в тот момент когда переменная будет равна двум, ссылка возвращается на начальную картинку
ok=0;
}else{
console.log('O_o');
}
});
</script>
Это простая галерея, но необходимо прописать размеры изображений в стайле. Такой способ может понадобиться когда надо сделать листалку фотографий, простой как 2*2. Условия в теле можно продолжать бесконечное количество раз. Прописывать путь адреса к изображению руками.
На яваскрипте много примеров фотогалереи, но эту можно написать на скорую руку когда надо скрыть свободное пространство фотографиями. Проще прибавить к переменной значение и следить по значению к каждому пути изображения.
Быстрая подгружаемая фотогалерея возможно не будет индексироваться в поиске, тогда для обозначения во внешним мире, хорошо будет прописать адрес страницы с якорной ссылкой. Так же менять якорную ссылку на каждую фотографию. И будет вам счастье! Спасибо за внимание! Успешного дня и волшебного настроения! А свою благодарность вы можете выразить поделившись этой записью в соцсетях. )
Amir (ChikChicly SpaceHands Forsmazhorovich)
to list