Как создать js скрипт для увеличения фото?
Суть вопроса в блоке расположены 10 фото. Нужно к каждому фото прикрепить событие которая будет давать возможность увеличивать фото (давать возможность пользователю просматривать фото в увеличенном виде) после выбора фото увеличивается при выборе следующего фото предварительное уменьшается и занимает свое прежнее место.
При переходе пользователя на другую страницу через меню или прокрутку фото которое было выбрано для просмотра возвращается в прежнее состояние.
При переходе пользователя на другую страницу через меню или прокрутку фото которое было выбрано для просмотра возвращается в прежнее состояние.
<div class="main-third-page main-page clearfix"> <div class="portfolio"> <h2>Portfolio</h2> </div> <div class="portfolio-row clearfix"> <img src="foto/portfolio/foto-1.jpg" class="left-first-top" id="foto1" alt="first-row " width="17" height="41"> <img src="foto/portfolio/foto-2.jpg" class="left-second-top" id="foto2" alt="first-row " width="17" height="41"> <img src="foto/portfolio/foto-3.jpg" id="foto3" alt="first-row " width="17" height="41"> <img src="foto/portfolio/foto-4.jpg" class="right-second-top" id="foto4" alt="first-row " width="17" height="41"> <img src="foto/portfolio/foto-5.jpg" class="right-first-top" id="foto5" alt="first-row " width="17" height="41"> <img src="foto/portfolio/foto-6.jpg" class="left-first-bottom" id="foto6" alt="first-row " width="17" height="41"> <img src="foto/portfolio/foto-7.jpg" class="left-second-bottom" id="foto7" alt="first-row " width="17" height="41"> <img src="foto/portfolio/foto-8.jpg" id="foto8" alt="first-row " width="17" height="41"> <img src="foto/portfolio/foto-9.jpg" class="right-second-bottom" id="foto9" alt="first-row " width="17" height="41"> <img src="foto/portfolio/foto-10.jpg" class="right-first-bottom" id="foto10" alt="first-row " width="17" height="41"> </div> </div>
Комментарии ()
Войдите, пожайлуста, в аккаунт, чтобы оставить комментарий.
Если хочешь выполнить самостоятельно, то могу предложить такой скрипт: