Как создать js скрипт для увеличения фото?

Тарас

21.02.2019

918

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

Сделать действительно что-то интересно не так то просто… И для начала можно поискать готовое решение (плагин 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>

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

Комментарии: