Простенький, но хороший плагин который создает эффект линзы при наведении курсора на какое-либо изображение
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 – пользовательский стиль линзы;
