Создание события в js для нескольких <img>

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


   Вопросы 0    221 0

Комментарии (1)

  1. Александр Мальцев # 0
    Сделать действительно что-то интересно не так то просто… И для начала можно поискать готовое решение (плагин jQuery) для этой ситуации.
    Если хочешь выполнить самостоятельно, то могу предложить такой скрипт:
    <script>
    // масштаб
    var scale = 3;
    // текущая высота
    var currentHeight = null;
    // текущая ширина
    var currentWidth = null;
    // при поднесении курсора к изображению
    $('img').hover(
      function(){
        // получить текущую высоту 
        currentHeight = $(this, 'img')[0].height;
        // получить текущую ширину
        currentWidth = $(this, 'img')[0].width;
        // увеличиваем изображения
        $(this).stop(true, false).animate({width: (currentWidth * scale), height: (currentHeight * scale)}, 300);
      },
      function(){
        // возвращаем в исходное состояние
        $(this).stop(true, false).animate({width: currentWidth + 'px', height: currentHeight + 'px'}, 300);
      }
    );
    </script>
    

    Вы должны авторизоваться, чтобы оставлять комментарии.