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

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

HIT

29.10.2015

2381

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

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

Иероним-Босх-Сад-земных-наслаждений 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 (единицы)

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

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

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

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

Экранная лупа для изображения Экранная лупа для изображения Экранная лупа для изображения Экранная лупа для изображения Экранная лупа для изображения
Ускорение сайта: новые требования
Рекомендации для васУскорение сайта: новые требованияOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.