/ Scripts & jquery / Image Magnifier

Image Magnifier

NEW

16.11.2020

82

Ранее был описан функционал увеличения фрагмента изображения (имитация лупы), но данный функционал действует по немного другому принципу. Image Magnifier может создавать увеличенный фрагмент изображения рядом с исходным.

Для начала подключаем скрипт Image Magnifier.

Верстка состоит из инициализации скрипта с параметрами полного и уменьшенного изображения:

<script type="text/javascript">
imageZoom(
  { blur: false, inner: false, tint: '#333', border: 0 },
  { src: '/wp-content/uploads/2020/11/Gaia-Clear-Glass-LED-Table-by-iNSPIRE-Q-Bold.jpg', height: 1000, width: 1000 },
  { src: '/wp-content/uploads/2020/11/Gaia-Clear-Glass-LED-Table-by-iNSPIRE-Q-Bold-500.jpg', height: 500, width: 500 }
);
</script>

CSS данного решения

<style>
div.image-zoom {display: flex;}
div.image-zoom div { background-repeat: no-repeat; }

div.image-zoom div.box {display: none; position: relative; border: 2px solid #333;}
div.image-zoom div.popup {display: none; position: relative; left: 0; border: 2px solid #333;}
div.image-zoom div.thumbnail {cursor: move; }
div.image-zoom.inner div.popup { margin: 0; }
</style>

Magnifier.js

Еще один плагин с аналогичным функционалом. Но в отличие от предыдущей версии, более простая инициализация на html атрибутами.

Чтобы функционал работал нужно подключить два скрипта (Magnifier.js, Event.js) и стиль (magnifier.css).

Верстка:

<div class="zooms">
	<a class="magnifier-thumb-wrapper" href="/wp-content/uploads/2020/11/Gaia-Clear-Glass-LED-Table-by-iNSPIRE-Q-Bold.jpg">
		<img id="thumb" src="/wp-content/uploads/2020/11/Gaia-Clear-Glass-LED-Table-by-iNSPIRE-Q-Bold-500.jpg"
		data-large-img-url="/wp-content/uploads/2020/11/Gaia-Clear-Glass-LED-Table-by-iNSPIRE-Q-Bold.jpg"
		data-large-img-wrapper="preview">
	</a>
	<div class="magnifier-preview example heading" id="preview"> </div>
</div>

Дополнительные стили:

.zooms {
    position: relative;
    display: inline-block;
}
#preview {
    position: absolute;
    left: 100%;
    top: 0;
    width: 500px;
    height: 500px;
}
#preview img {max-width: unset;}
.zooms img {display: block;}

Инициализация скрипта (!должна быть ниже верстки), без этого не работает:

<script>
var evt = new Event(),
m = new Magnifier(evt, {});

m.attach({
    thumb: '#thumb',
    zoomable: false
});
</script>

Можно инициализировать несколько изображений на странице, причем окно с увеличением можно сделать общим или отдельным, указав id окна в атрибуте data-large-img-wrapper=»preview». Каждое изображение нужно инициализировать:

m.attach({
    thumb: '#thumb',
    zoomable: false
});

m.attach({
    thumb: '#thumb1',
    zoomable: false,
});

Либо инициализировать по классу .thumb и вместо id у изображений прописывать класс.

jQuery Image Zoom

Еще одно неплохое решение по данной тематике — jQuery Image Zoom.

Поделится информацией с друзьями

  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Image Magnifier
Интеграция Яндекс.Кассы
Рекомендации для васИнтеграция Яндекс.КассыOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.