ImageLens – плагин jQuery для формирования эффекта линзы

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

Что нужно для использования?

  1. jQuery
  2. Плагин ImageLens – jquery.imagelens.js
  3. Изображение

Как его использовать?

Вставьте jQuery и jquery.imageLens.js в код вашей страницы -

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.imageLens.js" type="text/javascript"></script>

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

$("#img_01").imageLens();

Примечание: если вы используете IE 8 или старше, то вы увидите квадратную линзу.

(наведите курсор мыши на изображение для демонстрации эффекта линзы)

 

Если ваша миниатюра отличается от полномасштабного изображения, то вы можете указать источник, откуда его брать -

$("#img_03").imageLens({ imageSrc: "sample01.jpg" });

(наведите курсор мыши на изображение для демонстрации эффекта линзы)

 

Вы также можете изменить размер линзы -

$("#img_02").imageLens({ lensSize: 200 });

(наведите курсор мыши на изображение для демонстрации эффекта линзы)

 

Также можно изменить цвет и размер рамки линзы -

$("#img_04").imageLens({ borderSize: 8, borderColor: "#06f" });

(наведите курсор мыши на изображение для демонстрации эффекта линзы)