Эффект лупы для изображения uCoz

Эффект лупы для изображения uCoz

12015-10-13404711Денис Абдуллин

В этом материале мы поговорим о масштабировании картинки с эффектом лупы. При наведении на картинку появиться овальные элемент в радиусе которого картинка будет увеличиваться. Все это мы будем делать с помощью библиотеки JQuery и специального плагина ImageLens.

Установка

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

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

  <script type="text/javascript" language="javascript">
  $(function () {
  $("#img_01").imageLens();
  $("#img_02").imageLens({ lensSize: 200 });
  $("#img_03").imageLens({ imageSrc: "sample01.jpg" });
  $("#img_04").imageLens({ borderSize: 8, borderColor: "#06f" });
  });  
  </script>

Осталось вставить изображение на страничку и прописать к нему вызов функции эффекта лупы, а для этого прописываем на страничке следующий код:

Код
<img id="img_01" src="https://yraaa.ru/_pu/26/48359614.jpg" width="384" height="240" />

Установка завершена. По желанию вы можете подредактировать скрипт под себя. Отзывы оставляйте в комментариях. И не забывайте делиться материалами со своими друзьями.


Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Комментарии (11)
Денис Васильевич 2016-01-08 в 02:22 / МатериалСпам
Все супер ,Но как настроить уровень увеличения в данном скрипте ??
0
Daniel 2015-10-19 в 10:32 / МатериалСпам
Неужели добавил. Отличный скрипт, спасибо!
0
Миха 2015-10-14 в 12:37 / МатериалСпам
Кинь ссылку, там везде нужен доступ к img
0
Денис Минов 2015-10-14 в 12:36 / МатериалСпам
Ручками.
0
Денис Минов 2015-10-14 в 12:36 / МатериалСпам
Только что нашёл лупы в разы лучше.
Без обид конечно, но эти тоже классные :)
1
Руслан Чикин 2015-10-13 в 23:42 / МатериалСпам
Эффект лупы для изображения как сделать в фотоальбом "полная фотография и комментарии к нему"?
0
Deniss Lvov 2015-10-13 в 19:41 / МатериалСпам
Блин крутая штука, правда не знаю кода ее втюхнуть.
3
Андрей Краминцев 2015-10-13 в 19:47 / МатериалСпам
Обычно, это устанавливают на страницу "Портфолио", где можно детально рассмотреть, например макет сайта.
1
Роман Беляков 2016-05-01 в 03:55 / МатериалСпам
Уточните, пожалуйста, где именно прописываются эти коды?
0
Денис Абдуллин 2016-05-01 в 11:22 / Материал
В любом месте на странице в body, сохраняя последовательность.
0
Роман Беляков 2016-05-02 в 03:50 / МатериалСпам
То есть эта лупа будет работать только с одной картинкой? А как сделать чтобы работала со всем, что размещено в Фотоальбомах?
0
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.