Loupe - лупа

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

Разметка HTML

Можно использовать разметку использующую два изображения: оригинал и уменьшенную миниатюру. Оригинал указывается в атрибуте ссылки, а миниатюра в теге img:

Code
<a class="demo" href="1.jpg">
  <img src="thumb_1.jpg" width="180" height="240">
  </a>

Но можно использовать и одно оригинальное изображение:

Code
<img class="demo" src="2.jpg" width="180" height="240">

CSS

Code
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 библиотеку:

Code
<scriptsrc="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

И подключаем плагин:

Code
<script src="jquery.loupe.min.js"></script>

Опции

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

  • FalleN

  • 2486

  • 1

  • 225
Теги: jQuery, лупа, Loupe

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

Добавить комментарий:

Для добавления вы должны авторизироваться!