| Главная » Файлы » Прочие скрипты » 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 | |
| Просмотров: 493 | Загрузок: 0 | | |
| Всего комментариев: 0 | |
|
| |