🏠

Простая фотогалерея на чистом javascript

Когда надо по быстренькому включить фотографии как фотогалерею, чтобы они перелистывались по клику.

Вариант галереи от 19 ноября 2021 Модифицированная галерея с отображением в интернете по якорю с альтом

Существует много навороченных технологий, но чтобы галерея открывалась по быстренькому и работала, можно обойтись одним javascript голыми руками и своей головой.

<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. Условия в теле можно продолжать бесконечное количество раз. Прописывать путь адреса к изображению руками.

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

Скачать простую фото галерею.

Быстрая подгружаемая фотогалерея возможно не будет индексироваться в поиске, тогда для обозначения во внешним мире, хорошо будет прописать адрес страницы с якорной ссылкой. Так же менять якорную ссылку на каждую фотографию. И будет вам счастье! Спасибо за внимание! Успешного дня и волшебного настроения! А свою благодарность вы можете выразить поделившись этой записью в соцсетях. )

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

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

the best hosting

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