jQuery : Увеличение изображения - Лупа (loupe)
Очень часто, особенно на сайтах интернет магазинов необходимо добавить увеличивающееся изображение товара - в данном случае эффект наведении лупы...
Очень часто, особенно на сайтах интернет магазинов необходимо добавить увеличивающееся изображение товара - в данном случае эффект наведении лупы...
Плагин 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>
