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

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

13.10.2015205311marselo725

В этом материале мы поговорим о масштабировании картинки с эффектом лупы. При наведении на картинку появиться овальные элемент в радиусе которого картинка будет увеличиваться. Все это мы будем делать с помощью библиотеки 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="http://yraaa.ru/_pu/26/48359614.jpg" width="384" height="240" />

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




Сохраните в социальную сеть
Комментарии (11)
Deniss Lvov 13.10.2015 в 19:41Спам
Блин крутая штука, правда не знаю кода ее втюхнуть.
3
Обычно, это устанавливают на страницу "Портфолио", где можно детально рассмотреть, например макет сайта.
1
Эффект лупы для изображения как сделать в фотоальбом "полная фотография и комментарии к нему"?
0
Денис Минов 14.10.2015 в 12:36Спам
Ручками.
0
Денис Минов 14.10.2015 в 12:36Спам
Только что нашёл лупы в разы лучше.
Без обид конечно, но эти тоже классные :)
1
Миха 14.10.2015 в 12:37Спам
Кинь ссылку, там везде нужен доступ к img
0
Daniel 19.10.2015 в 10:32Спам
Неужели добавил. Отличный скрипт, спасибо!
0
Все супер ,Но как настроить уровень увеличения в данном скрипте ??
0
Уточните, пожалуйста, где именно прописываются эти коды?
0
Денис Абдуллин 01.05.2016 в 11:22
В любом месте на странице в body, сохраняя последовательность.
0
То есть эта лупа будет работать только с одной картинкой? А как сделать чтобы работала со всем, что размещено в Фотоальбомах?
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт