Блог студии веб-дизайна «Make a Site» Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Увеличение фрагмента изображения при наведении курсора мышки

Сегодня мы решили поделиться скриптом, написанным специалистами нашей студии веб-дизайна, который позволяет увеличивать изображение при наведении на него курсора мышки без открытия всплывающего окна. При этом движение мышки напоминает движение воображаемой лупы — увеличивается та область изображения, над которой находится курсор.

Увеличение фрагмента изображения при наведении курсора мышки
Содержание статьи

Смысл увеличения фрагмента изображения

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

notebook-and-way-too-big-imageСмысл метода увеличения фрагмента изображения при наведении курсора мышки заключается в том, что размер детального изображения может превышать разрешение экрана пользователя, например разрешение экрана ноутбука, с которого просматривают сайт — 1280х800, а размер детального изображения — 1920х900. Ясное дело, что целиком на экране оно никак не уместится, поэтому для его увеличения классический метод с помощью выпадающего окна здесь не подходит. Нужно либо уменьшить картинку до размеров экрана пользователя, либо масштабировать ее (лучше так не делать), либо использовать хитрость и увеличивать лишь часть изображения. В таком случае сайт будет прекрасно смотреться как на больших, так и на маленьких мониторах, но при этом размер детальной картинки будет достаточно большим, чтобы пользователи смогли ее подробно изучить.

Преимущества и недостатки

Как мы уже упомянули ранее, главным преимуществом скрипта увеличения не всего изображения, а лишь его части, разработанного сотрудниками нашей студии, является независимость от разрешения экрана пользователя, но есть и другие преимущества, которые можно выделить:

  • простота установки;
  • гибкость настройки;
  • минимальный размер JavaScript;
  • простейшая HTML разметка;
  • совместимость с jQuery любой версии;
  • кроссбраузерность;
  • подходит для разных разрешений экранов;
  • лучше навороченных аналогов;
  • бесплатный;
  • подробное описание принципа работы и легко читаемый исходный код.

Как видите, преимуществ достаточно много и они очевидны. Да, несомненно, вы можете скачать аналогичные скрипты или стащить их с какого-нибудь крупного интернет-магазина. Данный метод, кстати говоря, называется Cloud Zoom, который, на самом деле, является платным и слишком наворочен. Сейчас подобные скрипты широко распространены и используются на многих сайтах, но вам придется потратить довольно много времени для того, чтобы разобраться и интегрировать аналогичный скрипт на свой сайт. Мы же в данной статье подробно опишем работу нашего скрипта, а если учесть, что его код состоит всего из нескольких строк, то вникнуть в суть дела вам удастся всего за несколько минут.

balancing-scalesЕсли говорить о недостатках, то в голову приходит только один момент, да и называть его недостатком можно с натягом. Дело в том, что увеличенное изображение загружается в скрытом слое заранее, еще до того, как пользователь куда-либо нажал. Нам это просто необходимо потому, что когда курсор мышки окажется над картинкой, нужно чтобы увеличенный фрагмент появился моментально, а для этого приходится использовать предварительную загрузку. Но в этом ничего страшного нет, так как обычно на странице будет всего одно такое изображение, а его размер не так уж велик (200-300 Кб при разрешении 1800х1100 как в нашем примере), чтобы стоило переживать за интернет-трафик пользователя.

Разработка в деталях, от А до Я

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

HTML разметка

Как всегда, мы начинаем с HTML разметки страницы. Она до безобразия проста и содержит всего несколько строк кода:

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

  • постараться разместить этот контейнер как можно выше в DOM (в коде страницы) — чем выше, тем быстрее скрипт будет готов к работе;
  • скрыть контейнер preload от глаз пользователей, выведя за обозримую область экрана (display: none при этом не подойдет).

Далее идет контейнер, содержащий превью. Мы присвоили ему класс zoomable, который, как не трудно догадаться, означает, что картинка может быть масштабирована. Изображение, которое в нем находится, отображается по умолчанию. Здесь тоже есть несколько ключевых моментов, которые не стоит упускать из виду:

  • размер контейнера должен быть указан явно (ширина и высота, равные размерам превью);
  • контейнер не должен содержать полос прокрутки, а все, что в нем не умещается, не должно отображаться (CSS свойство overflow);
  • при наведении, можно опционально изменить курсор мышки на нестандартный или, как в примере, на один из подходящих стандартных (в виде прицела).

Важным моментом здесь является добавление произвольных атрибутов к маленькому изображению:

  • data-preview-url (путь к маленькому изображению);
  • data-img-url (путь к детальному изображению).

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

CSS стили

CSS выглядит довольно просто и отвечает всем перечисленным ранее требованиям:

.preload {
	position: absolute;
	z-index: -1;
	top: -5000px;
	left: -5000px;
}
.zoomable {
	cursor: crosshair;
	width: 600px;
	height: 368px;
	overflow: hidden;
	margin: 0 auto;
}

Предварительная загрузка детального изображения

Как мы уже упоминали ранее, предварительная загрузка большого изображения нам необходима для того, чтобы в момент наведения пользователем курсора мышки на изображение превьюшки, наш с вами скрипт был полностью готов к работе и не происходило никаких задержек. Вот две основных причины, почему предварительная загрузка детальной картинки в данном случае полностью оправдана:

  • детальное изображение должно заранее закешироваться браузером;, чтобы в случае необходимости, моментально отобразиться на экране;
  • для работы скрипта нужно вычислить коэффициент — отношение размеров детального изображения к размерам превью (об этом чуть позже).

JavaScript функция

Теперь все готово и мы переходим к самой интересной части — JavaScript, благодаря которому все это и будет работать.

Итак, приступим и сразу приведем рабочий скрипт целиком, чтобы его было удобно скопировать, а затем детально рассмотрим по частям:

$(window).load(function() {
	$('.zoomable').hover(
		function() {
			$('.zoomable img').stop().animate({opacity: 0}, 0, 
				function() { 
					$('.zoomable img').attr({src: $('.zoomable img').attr('data-img-url')}); 
				}
			).animate({opacity: 1}, 300);
			
		}, 
		function() {
			$('.zoomable img').stop().animate({opacity: 0}, 0, 
				function() { 
					$('.zoomable img').attr({src: $('.zoomable img').attr('data-preview-url')}).css({margin: "0 0"}); 
				}
			).animate({opacity: 1}, 300);
		}
	);

	var c = $('.preload img').width() / $('.zoomable img').width();
	
	$('.zoomable').mousemove(function(e) {		
		var pX = e.pageX - $(this).offset().left;
		var pY = e.pageY - $(this).offset().top;
		
		var iX = pX * c - pX;
		var iY = pY * c - pY;
		
		$('.zoomable img').css({margin: "-" + iY + "px -" + iX + "px"});
		
	});
});

Прежде всего, стоит обратить ваше внимание, что данная функция вызывается не после готовности DOM, а после полной загрузки страницы:

$(function() {
	console.log('DOM is ready');
});

$(window).load(function() {
	console.log('Page is ready');
});

Дело в том, что стандартный $(function() {}); здесь нам не подойдет, ведь если готова структура документа, это еще не значит, что загрузились все находящиеся в нем мультимедийные файлы. А так как нам очень важно получить размеры детального изображения еще до начала работы скрипта, то такое решение полностью оправдано.

Итак, прежде всего, мы обрабатываем событие наведения мышки на наше с вами изображение, используя стандартную функцию jQuery — hover().

$('.zoomable').hover(
	function() {
			
	}, 
	function() {

	}
);

В случае, если курсор мышки находится над контейнером zoomable, мы временно скрываем изображение, незаметно производим подмену его атрибута src (source), а затем плавно выводим на экран. При этом не будет неприятных скачков и все пройдет гладко.

В случае же, когда мышка не находится над контейнером zoomable, мы проделываем ту же операцию, только теперь уже возвращаем все на место, как было по умолчанию. Данный этап является самой простой частью нашего скрипта и проблем с его пониманием ни у кого быть не должно, поэтому переходим дальше.

var c = $('.preload img').width() / $('.zoomable img').width();

Данная строка кода вычисляет необходимый для нашего скрипта коэффициент — соотношение размеров маленького и большого изображений. Это нужно для того, чтобы производить точное масштабирование, в зависимости от того, где в данный момент находится курсор мышки пользователя.

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

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

$('.zoomable').mousemove(function(e) {

});

Теперь нам нужно вычислить координаты курсора мышки относительно левого верхнего угла экрана. Но нас интересует расположение курсора относительно элемента, а не начала координат, поэтому необходимо сразу же отнять от этих координат расстояние левого верхнего угла контейнера zoomable от начала координат:

var pX = e.pageX - $(this).offset().left;
var pY = e.pageY - $(this).offset().top;

Все что нам остается, это вычислить и подставить значения отступов (margin-top и margin-left) для детального изображения, чтобы знать, насколько его сдвигать для достижения эффекта увеличения фрагмента изображения. Поскольку слой zoomable у нас имеет фиксированные размеры, а все, что выходит за его пределы не отображается, то требуемый эффект будет получен при помощи отрицательных отступов:

var iX = pX * c - pX;
var iY = pY * c - pY;
		
$('.zoomable img').css({margin: "-" + iY + "px -" + iX + "px"});

Пример работы скрипта

Для примера мы выбрали изображение, увеличение которого может заинтересовать многих. Ведь согласитесь, всем же интересно прочитать, что написано на этикетке бутылки шампанского 🙂

открыть в новой вкладке

П.С. Комментарии к статье и распространение данного скрипта приветствуются.


Предыдущая статья:
WordPress: вывод и оригинальное оформление рубрик (категорий) записей

Читайте также:
jQuery Countdown — эффектный таймер обратного отсчета на JavaScript


Блог студии веб-дизайна «Make a Site».
Дизайн, верстка, программирование, наполнение и раскрутка сайтов.

Текущий проект: «Stream Booster» — раскрутка Twitch и YouTube каналов

Студия веб-дизайна «Make a site»