Главная » Файлы » Прочие скрипты » jQuery

Простой эффект увеличительного стекла через плагин loupe на jQuery для uCoz
24.06.14, 18:57:28

Скачать файл




Простой лёгкий плагин, который позволяет быстро просматривать элементы изображения в увеличенном виде. Плагин очень прост в установке и использовании

Для начала посмотрите ДЕМО

Моё тестирование в фидле: КЛИК

Установка:

В самый низ вашего css вставляйте:
Код
.demo {  
float:left;  
  }  
  a img {  
border:none;  
  }  
  .demo {  
position:relative;  
  }  
  .loupe {  
background-color:#555;  
background:rgba(0, 0, 0, 0.25);  
border:5px solid rgba(0, 0, 0, 0);  
cursor:url(/img/blank.png), url(/img/blank.cur), none;  
  }


Далее после < /head > на нужных страницах вставляйте:
Код
<script src="/js/jquery.loupe.min.js"></script>  
  <script>  
  $(document).ready(function() {  
  $('.demo').loupe({  
width: 200, // ширина лупы  
height: 150, // высота лупы  
loupe: 'loupe' // css класс лупы  
  });  
  });  
  </script>


Пример оформления картинки - миниатюры, при наведении на которую эффект увеличения будет браться из полноразмерного изображения:
Код
<a class="demo" href="Ссылка на большое изображение">  
<img src="Ссылка на маленькую картинку" width="180" height="240" />  
  </a>


Следующий пример простой картинки. При увеличении увеличиваться будет та же картинка, что и на миниатюре:
Код
<img class="demo" src="Ссылка на картинку" width="180" height="240" />


Скрипт из прикреплённого архива залейте в папку js, остальные два файла (.cur и .png) залейте в папку img

За основу взята ЭТА статья

Материал подготовлен Apocalypse

Категория: jQuery | Добавил: Apocalypse | Теги: эффект, Через, на, плагин, JQuery, стекла, простой, увеличительного, для, Loupe
Просмотров: 382 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: