Loupe
~lt~tit~gt~Простое использование~lt~/tit~gt~
~lt~coment~gt~Плагин loupe позволяет добавлять эффект лупы при просмотре миниатюр изображений.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
~lt~script src="/plagins/loupe/jquery.loupe.min.js"~gt~~lt~/script~gt~
~lt~style~gt~
/*вспомогательные стили для демонстрации*/
body, html { height:100%; margin:0; overflow:hidden; padding:0; width:100%; }
a.demo { float:left; }
a img { border:none; }
div { margin:0 auto; position:relative; top:50%; width:430px; }
img.demo { float:right; }
.demo { position:relative; top:-120px; }
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~div~gt~
~lt~a class="demo" href="http://farm4.static.flickr.com/3598/3551599565_9dd3f9c6a1.jpg"~gt~
~lt~img src="http://farm4.static.flickr.com/3598/3551599565_9dd3f9c6a1_m.jpg" width="191" height="240" /~gt~
~lt~/a~gt~
~lt~img class="demo" src="http://farm3.static.flickr.com/2479/3549662506_4374920e94.jpg" width="191" height="240" /~gt~
~lt~/div~gt~
~lt~script~gt~
$('.demo').loupe();
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
~lt~--------------------------~gt~
~lt~tit~gt~Оформление лупы~lt~/tit~gt~
~lt~coment~gt~С помощью дополнительных css-правил можно значительно улучшить вид увеличительной области, сделав ее похожей на лупу: добавив полупрозрачные края и убрав курсор. С помощью свойств плагина можно изменить размеры лупы, например, сделав ее квадратной.~lt~/coment~gt~
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
~lt~script src="/plagins/loupe/jquery.loupe.min.js"~gt~~lt~/script~gt~
~lt~style~gt~
/*вспомогательные стили для демонстрации*/
body, html { height:100%; margin:0; overflow:hidden; padding:0; width:100%; }
a.demo { float:left; }
a img { border:none; }
div { margin:0 auto; position:relative; top:50%; width:430px; }
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(/plagins/loupe/blank.png), url(/plagins/loupe/blank.cur), none; }
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~div~gt~
~lt~a class="demo" href="http://farm4.static.flickr.com/3598/3551599565_9dd3f9c6a1.jpg"~gt~
~lt~img src="http://farm4.static.flickr.com/3598/3551599565_9dd3f9c6a1_m.jpg" width="191" height="240" /~gt~
~lt~/a~gt~
~lt~img class="demo" src="http://farm3.static.flickr.com/2479/3549662506_4374920e94.jpg" width="191" height="240" /~gt~
~lt~/div~gt~
~lt~script~gt~
$('.demo').loupe({width:150, height:150});
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
Описание
Свойства
Оформление
Плагин loupe позволяет добавлять эффект увеличительного стекла при просмотре миниатюр изображений. К элементу, играющему роль лупы можно применять собственные css-правила для настройки его оформления. Плагин можно использовать как с парами картинок: "миниатюра"-"полноразмерная", так и с одной: "уменьшенная на странице"-"полноразмерная" (под "уменьшенной на странице" подразумевается отображение оригинала с выставленными меньшими размерами в теге img).
Подключение и использование
Чтобы плагин стал доступен на странице необходимо подключить файл с библиотекой jQuery и файл плагина: (его можно скачать на официальном сайте):
~lt~link rel="stylesheet" href="feature-carousel.css" charset="utf-8" /~gt~
~lt~script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
~lt~script type="text/javascript" src="jquery.loupe.min.js"~gt~~lt~/script~gt~
Плагин можно применить к двум типам html-шаблонам:
Миниатюра + полноразмерная:
<a class="demo" href="full_size_img.jpg">
<img src="min_size_img.jpg" width="191" height="240" />
</a>
Только полноразмерная:
<img src="full_size_img.jpg" width="191" height="240" />
В первом случае, путь к полноразмерной картинке нужно указать в обертывающей изображение ссылке.
Чтобы запустить плагин на требуемых изображениях, в первом случае, нужно будет вызвать метод плагина на объекте jQuery с элементом ссылки, а во втором случае, на элементе изображением:
// для первого случая:
$('a.demo').loupe();
// для второго случая:
$('img').loupe(); Информация
- Размер плагина ~1k
- Официальная страница: [1]
- Кроссбраузерный (работает во всех современных браузерах)
↓ название :типы значений (значение по умолчанию)
Определяет ширину (в пикселях) увеличительной области.
// ------- Работа со свойством width ---------
// в момент установки плагина на элемент
$('img').loupe({width:150});
Определяет высоту (в пикселях) увеличительной области.
// ------- Работа со свойством height ---------
// в момент установки плагина на элемент
$('img').loupe({height:200});
Элемент, который в итоге выполняет роль лупы, создается плагином автоматически. В свойстве
loupe можно задать имя класса, которое будет присвоено этому элементу, чтобы пользователь мог работать с его оформлением и/или поведением.
// ------- Работа со свойством loupe ---------
// в момент установки плагина на элемент
$('img').loupe({loupe:'myLoupe'});
Элемент, который в итоге выполняет роль лупы, создается плагином автоматически. Имя класса этого элемента задается в свойстве loupe и по умолчанию, оно равно 'loupe'. Это позволяет задавать настройки оформления этому элементу, например можно добавить полупрозрачные края и убрать курсор, как это сделано в демонстрации "Оформление лупы" (см. выше). Ширину и высоту лупы следует задавать в свойствах плагина, а не с помощью css.