• Главная
  • WEB студия
    • Услуги и Цены
    • Домены
    • Хостинг и Почта
    • Сайт-Визитка
    • Интернет-магазин
    • Поддержка сайта
    • Портфолио
  • Продвижение сайта
    • Контекстная реклама
    • Семантическое ядро
    • SEO продвижение сайта
  • Социальные сети
    • SMO/SMM-продвижение
    • Создание и ведение групп
    • Автопостинг новостей
  • Парсинг сайтов
    • Зачем нужен парсинг?
    • Зачем нужен парсинг?
    • Анализ цен конкурентов
  • Журнал о Web
    • Поисковые системы
    • Все о SEO
    • Все о SMM
    • jQuery скрипты
    • Малый бизнес
  • Справочники
    • HTML
    • CSS
    • PHP
    • MySQL
    • jQuery
  • Информация
    • Кто МЫ!?
    • Контакты
    • Оплата услуг
    • Спасибо Вам
  • Инструменты
  • SEOker
  • SIZEr
  • HTML редактор
  • Наши проекты
  • W1CMS.ru
  • DiiF.ru
  • MinURL.ru

jQuery : Увеличение изображения - Лупа (loupe)

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

  1. Главная
  2. Все про JS : jQuery, Node, AngularJS

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

Плагин loupe позволяет добавлять эффект увеличительного стекла при просмотре миниатюр изображений. К элементу, играющему роль лупы можно применять собственные css-правила для настройки его оформления. Плагин можно использовать как с парами картинок: "миниатюра"-"полноразмерная", так и с одной: "уменьшенная на странице"-"полноразмерная" (под "уменьшенной на странице" подразумевается отображение оригинала с выставленными меньшими размерами в теге img).

Подключение и использование

Чтобы плагин стал доступен на странице необходимо подключить файл с библиотекой jQuery и файл плагина: (его можно скачать на официальном сайте):

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script><script type="text/javascript" src="jquery.loupe.min.js"></script>

Миниатюра + полноразмерная:Плагин можно применить к двум типам html-шаблонам:

<a href="full_size_img.jpg">
<img src="min_size_img.jpg" width="191" height="240" />
</a><br>

Только полноразмерная:

<img src="full_size_img.jpg" width="191" height="240" />

В первом случае, путь к полноразмерной картинке нужно указать в обертывающей изображение ссылке.

Чтобы запустить плагин на требуемых изображениях, в первом случае, нужно будет вызвать метод плагина на объекте jQuery с элементом ссылки, а во втором случае, на элементе изображением:

// для первого случая:
$('a.demo').loupe();
// для второго случая:
$('img').loupe();<br>

еще пример:

подключение скрипта

<script type="text/javascript" src="http://dveri-alta.ru/ajax/jquery.loupe.min.js"></script>
<script type="text/javascript">$('.lup').loupe();</script> <br>

Вывод картинки

<div class="bgc-good gd"><div class="bgc-name"><a href="doors-view-125.html" title="Эко С 20 Ф">Эко С 20 Ф</a> </div>
<div class="bgc-img"><img class="lup" src="uploads/doors/doors-uO4n49eQkZ.jpg"></div><div class="bgc-price">2550 руб.</div>
<div class="bgc-buy"><a href=""><a href="doors-view-125.html" class="b1c" title="Эко С 20 Ф">Подробнее</a></a></div></div><br>

Скачать : JQuery Loupe

Рекомендуем

Теги

SEO HTML CSS JavaScript

Смотрите также

Веб-студия

  • Услуги и Цены
  • Аренда сайтов
  • Реклама на наших проектах
  • Журнал о Web технологиях

Сделаем

  • Сайт-Визитку
  • Интернет-магазин
  • Landing Page
  • Поддержка сайта

Заполним

  • Написание статей
  • Обмен данными
  • Парсинг сайтов

Продвинем

  • Контекстная реклама
  • Продвижение сайта
  • Социальные сети
  • Автопостинг новостей

Наши контакты

W1C : Первый Веб-Консультант
mail@w1c.ru
Пн - Пт: 10:00 - 20:00

Дизайн и разработка сайта - W1C на W1CMS
W1C : Web First Consultant - Intelligence everywhere ©