Ранее был описан функционал увеличения фрагмента изображения (имитация лупы), но данный функционал действует по немного другому принципу. 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.
