LOUPE - ЛУПА


LOUPE - ЛУПА


Легкий (около 1кб) jQuery плагин увеличения изображения. Проще говоря, обычная лупа.

Разметка HTML
Можно использовать разметку использующую два изображения: оригинал и уменьшенную миниатюру. Оригинал указывается в атрибуте ссылки, а миниатюра в теге img:
        <a class="demo" href="1.jpg">
            <img src="thumb_1.jpg" width="180" height="240" />
        </a>


Но можно использовать и одно оригинальное изображение:
<img class="demo" src="2.jpg" width="180" height="240" />


CSS
a.demo { float:left; }
a img { border:none; }
img.demo { float:right; }
.demo { 
     position:relative; 
     top:-120px; 
     }
.loupe { 
     background-color:#555;
     background:rgba(0, 0, 0, 0.25);
     border:5px solid rgba(0, 0, 0, 0);
     cursor:url(blank.png), url(blank.cur), none;
     }


javascript
Подключаем jQuery библиотеку:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>


И подключаем плагин:
<script type="text/javascript" src="jquery.loupe.min.js"></script>


Инициализация плагина:
<script type="text/javascript">$('.demo').loupe();</script>


Опции
$('selector').loupe({
  width: 200, // ширина лупы
  height: 150, // высота лупы
  loupe: 'loupe' // css класс лупы
});


Скачать исходник:
Desktop.rar


скрипт LOUPE - ЛУПА скрипт
Комментариев 1
Игорь
Куда вставляются опции? Можно на примере?
Статистика
0  
Всего статей 1025
0  
Всего комментариев 57
0  
Пользователей 3333
Обновления new
  • XenForo Resource Manager 1.1.4
  • Что такое Менеджер ресурсов (Resource Manager)? Менеджер ресурсов является официальным дополнением для XenForo, которое позволяет управлять
  • Boss Electronues - Шаблон для OpenCart
  • И так, данный шаблон заточен под OpenCart. В данном шаблоне есть не свойственная для магазинов возможность писать блоги. В шаблон встроен блог от
  • R.Gen - Шаблон на OpenCart
  • R.Gen - это отличный премиум шаблон на OpenCart. Отличный дизайн, полностью настраиваемый и в тоже время простой в шаблон для создания серьезного
  • 30 psd логотипов на разные тематики
  • Эта сборка из 30 psd логотипов на разную тематику. Логотипы схематичные, яркие, детализированные, в отличном качестве и в формате PSD. Логотипы не
  • Xenu Программа для проверки битых ссылок
  • Xenu старенькая но очень полезная программа для поиска битых ссылок на сайте. Описание: Проверка ссылок делается на: ссылки, изображения, рамок,
Информация