Суть вопроса в блоке расположены 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>