Простенький, но хороший плагин который создает эффект линзы при наведении курсора на какое-либо изображение

HTML каркас

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

1
2
<img id="mlens_img" src="mlensimg.jpg" alt="..." data-big="mlensimg_big.jpg"
    data-big2x="mlensimg@2x.jpg" data-overlay="overlay.png" />

Атрибут data-big указывает на большое изображение которое будет использоваться при наведении на основное.
Атрибут data-overlay указывает на изображение которое будет отображаться в самой линзе, этот параметр не обязателен и в демо примере использоваться не будет.
И атрибут data-big2x указывает на большое изображение которое будет использоваться на retina дисплеях.

jQuery код

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script type="text/javascript">
$(document).ready(function()
{
    $("#mlens_img").mlens(
    {
        imgSrc: $("#mlens_img").attr("data-big"),
        imgSrc2x: $("#mlens_img").attr("data-big2x"),
        lensShape: "circle",
        lensSize: 180,
        borderSize: 4,
        borderColor: "#fff",
        borderRadius: 0,
        imgOverlay: $("#mlens_img").attr("data-overlay"),
        overlayAdapt: true,
        zoomLevel: 2,
        lensCSS: ""
    });
});
</script>

imgSrc — ссылка на большое изображение, в данном примере адрес берется из атрибута;
imgSrc2x — ссылка на большое изображение для retina дисплеев, в данном примере адрес берется из атрибута(параметр не обязательный);
lensShape — тип линзы, круг или квадрат(circle/square);
lensSize — размер линзы в пикселях;
borderSize — размер границы линзы в пикселях;
borderColor — цвет границы линзы;
borderRadius — сглаживание углов границ линзы в пикселях;
imgOverlay — ссылка на изображение которое будет отображаться в линзе, в данном примере адрес берется из атрибута(не обязательный параметр);
overlayAdapt — накладываемое изображение адаптируется к размеру линзы, используется в связке с imgOverlay(true/false);
zoomLevel — уровень увеличения линзы;
lensCSS — пользовательский стиль линзы;

Возможно вас это заинтересует
comments powered by HyperComments