/ Сайтостроение / Scripts & jquery / Экранная лупа для изображения

Экранная лупа для изображения

HIT

29.10.2015

1596


Эта страница может загружаться дольше остальных, т.к. подгружаются исходники больших демо изображений

Создадим инструмент-лупа для просмотра деталей крупных изображений. Примеры работы скрипта:

Иероним-Босх-Сад-земных-наслаждений

Italy_AmalfiCOast-AmalfiVillage

Подключаем скрипт и его инициализацию, указываем на какой элемент воздействует лупа. В примере ниже на класс demo

<script type="text/javascript" src="https://opttour.ru/wp-content/themes/tester/js/jquery.loupe.min.js"></script>
<script type="text/javascript">$('.demo').loupe();</script>

Плагин можно применить к двум типам html-шаблонам:

Миниатюра + полноразмерная:

<a class="demo" href="full_size_img.jpg">
<img src="min_size_img.jpg" width="191" height="240" />
</a>

Только полноразмерная:

 <img class="demo" src="full_size_img.jpg" width="191" height="240" >

В первом случае, путь к полноразмерной картинке нужно указать в обертывающей изображение ссылке.

Чтобы запустить плагин на требуемых изображениях, в первом случае, нужно будет вызвать метод плагина на объекте jQuery с элементом ссылки, а во втором случае, на элементе изображением:

// для первого случая:
$('a.demo').loupe();
 
// для второго случая:
$('demo').loupe(); // для изображений с классом demo

$('img').loupe(); // для всех изображений

Можно добавить css для лупы: увеличить, уменьшить, сделать круглой, добавить обводку, тень, !скрыть курсор.
И на всякий случай надо сбросить свойство max-width для изображения под лупой.

.loupe {
    width: 500px !important;
    height: 300px !important;
    /*border-radius: 50%;*/
    cursor: none;
}
.loupe img {max-width: none;}

Наблюдались проблемы с работой модуля в случае когда у какого-либо из предков было css-свойство z-index


Чтоб курсор (скрытый или видимый) был посередине лупы, в скрипте надо найти кусок l=c.width/2,n=c.height/2 и установить 1 (еденицы)

Поделится информацией с друзьями

  • Комментарии
  • Вложения

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

Пока нет комментариев. Будь первым!

Экранная лупа для изображения Экранная лупа для изображения Экранная лупа для изображения Экранная лупа для изображения Экранная лупа для изображения
Upgrade WC
Рекомендации для васUpgrade WCOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.