Главная » Файлы » Прочие скрипты » jQuery |
Обалденный плагин увеличительных стёкол jQuery Loupe для uCoz
24.06.14, 10:08:48 | |
Очень необычный и функциональный плагин для различных эффектов увеличительных стёкол Для начала посмотрите ДЕМО Установка: После /head на нужных страницах: Код <script type="text/javascript" src="/js/jquery.mousewheel.js"></script> <script type="text/javascript" src="/js/jquery.easing.1.2.js"></script> <script type="text/javascript" src="/js/jquery.loupe.js"></script> <link rel="stylesheet" type="text/css" href="/css/jquery.loupe.css" /> <script type="text/javascript"> $(document).ready(function() { $('#loupe1').loupe({ 'max_size' : 600, 'default_size' : 160, 'loupe_toggle_time' : 'fast' }); $('#loupe2').loupe({ 'overlay_class_name': 'overlay_img', 'shape' : 'rounded', 'default_size' : 160, 'min_size' : 200, 'max_size' : 400, 'size_snap' : 25, 'allow_zoom' : false }); $('#loupe3').loupe({ 'default_zoom': 100, 'shape' : 'square', 'default_size' : 160, 'glossy' : false, 'drop_shadow' : false }); $('#loupe4').loupe({ 'default_zoom': 100, 'default_size' : 160, 'apply_overlay' : false, 'drop_shadow' : false }); $('#loupe5').loupe({ 'default_size' : 160, 'apply_overlay' : false, 'shape' : 'rounded', 'allow_zoom' : false, 'allow_resize' : false }); $('#loupe6').loupe(); }); </script> Картинки оформляем так: Код <div class="container"> <a href="#"><img alt="" src='Ссылка на картинку' id="loupe1" /></a> <em>Описание</em></p> </div> <div class="container"> <a href="Ссылка на основную картинку" id="loupe2"><img alt="" src="Ссылка на дополнительную картинку" /></a> <em>Описание</em></p> </div> <div class="container"> <a href="Ссылка на основную картинку" id="loupe3"><img alt="" src="Ссылка на дополнительную картинку" /></a> <em>Описание</em></p> </div> <div class="container"> <a href="Ссылка на основную картинку" id="loupe4"><img alt="" src="Ссылка на дополнительную картинку" /></a> <em>Описание</em></p> </div> <div class="container"> <a href="Ссылка на основную картинку" id="loupe5"><img alt="" src="Ссылка на дополнительную картинку" /></a> <em>Описание</em></p> </div> <div class="container"> <a href="Ссылка на основную картинку" id="loupe6"><img alt="" src="Ссылка на дополнительную картинку" /></a> <em>Описание</em></p> </div> Скрипты из прикреплённого архива залейте в папку js, стиль в папку css и картинки в папку images Материал подготовлен и адаптирован Apocalypse | |
Просмотров: 431 | Загрузок: 0 | |
Всего комментариев: 0 | |
| |