Главная » Файлы » Прочие скрипты » 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
Категория: jQuery | Добавил: Apocalypse | Теги: Обалденный, ucoz, стёкол, плагин, JQuery, увеличительных, для, Loupe
Просмотров: 290 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: