Плагин jQuery cloud-zoom – лупа для картинок. Лупа плагин wordpress


Эффект лупы для изображений | XoZblog

Здравствуйте, уважаемые читатели XoZbloga! В данной статье расскажу и покажу, один из способов реализации эффекта увеличительного стекла (лупы) для изображений на сайте. Автором данного решения является @_rishabhp. Для работы нам понадобится библиотека jQuery, а также будем использовать CSS3. То что получится в итоге Вы можете опробовать на демо странице или скачать исходники.

HTML разметка

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

1

<img src="image.jpg"/>

Ну и соответственно должна быть установлена ширина изображения, меньше чем есть в действительности, чтобы было что приближать.

Стили CSS

Когда пользователь наводит курсор на изображение появляется увеличительное стекло. Эффект стекла достигается благодаря скругленным углам и тени.

12345678910111213141516

.glass {  width: 175px;  height: 175px;  position: absolute;  border-radius: 50%;  cursor: crosshair;    /* Создание эффекта стекла */  box-shadow:    0 0 0 7px rgba(255, 255, 255, 0.85),    0 0 7px 7px rgba(0, 0, 0, 0.25),     inset 0 0 40px 2px rgba(0, 0, 0, 0.25);    /* Изначально скрыто */  display: none;}

Вот так выглядит лупа

Лупа, точнее блок div glass создается средствами jQuery, при наведении курсора выводится методом fadeIn. Но обо всем по порядку.

jQuery

И так, следующий код формирует блок div glass, который является увеличительным стеклом:

12345678

  // Добавляем увеличительное стекло   if (ui.magniflier.length) {     var div = document.createElement('div');     div.setAttribute('class', 'glass');     ui.glass = $(div);

    $('body').append(div);  }

Однако, до того как мы сформируем увеличенную область изображения и покажем ее, нужно произвести несколько действий. И первое что необходимо, так это определить положение курсора на странице.

Для удобства помещаем эту функцию в переменную:

12345678910111213141516171819202122232425262728293031

// Определяем положение курсора   var mouseMove = function(e) {     var $el = $(this);

    // Получаем отступы до края картинки слева и сверху    var magnify_offset = cur_img.offset();       // Позиция курсора над изображением    // pageX/pageY - это значения по х и у положения курсора от краев браузера    mouse.x = e.pageX - magnify_offset.left;    mouse.y = e.pageY - magnify_offset.top;       // Увеличительное стекло должно отображаться только когда указатель мыши находится над картинкой    // При отводе курсора от картинки происходит плавное затухание лупы    // Поэтому необходимо проверить, не выходит ли за границы картинки положение курсора    if (      mouse.x < cur_img.width() &&      mouse.y < cur_img.height() &&      mouse.x > 0 &&      mouse.y > 0      ) {      // Если условие истинно то переходим дальше      magnify(e);    }    else {      // иначе скрываем      ui.glass.fadeOut(100);    }

    return;  };

Следующим шагом является, расчет положения лупы над картинкой и положение изображения в лупе (т.к. увеличенная область изображения будет являться фоном для блока glass). После расчета полученные значения присваиваем CSS свойствам блока glass:

1234567891011121314151617181920212223242526272829303132

  var magnify = function(e) {

    // Основное изображение будет в качестве фона в блоке div glass    // поэтому необходимо рассчитать положение фона в этом блоке      // относительно положения курсора над картинкой    //    // Таким образом мы рассчитываем положение фона    // и заносим полученные данные в переменную     // которая будет использоваться в качестве значения     // свойства background-position

    var rx = Math.round(mouse.x/cur_img.width()*native_width - ui.glass.width()/2)*-1;    var ry = Math.round(mouse.y/cur_img.height()*native_height - ui.glass.height()/2)*-1;    var bg_pos = rx + "px " + ry + "px";       // Теперь определим положение самого увеличительного стекла    // т.е. блока div glass    // логика простая: половину ширины/высоты лупы вычитаем из      // положения курсора на странице

    var glass_left = e.pageX - ui.glass.width() / 2;    var glass_top  = e.pageY - ui.glass.height() / 2;       // Теперь присваиваем полученные значения css свойствам лупы    ui.glass.css({      left: glass_left,      top: glass_top,      backgroundPosition: bg_pos    });

    return;  };

Увеличительное стекло в действии

Последний шаг — обработка события движение курсора над изображением. В данной обработке мы выполняем следующие операции: определяем текущий элемент изображение, его реальные размеры, путь до изображения. Все это необходимо для расчета положения и последующего показа лупы.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960

  // Движение курсора над изображению   $(ui.magniflier).on('mousemove', function() {   // Плавное появление лупы    ui.glass.fadeIn(100);     // Текущее изображение     cur_img = $(this);     // определяем путь до картинки     var src = cur_img.attr('src');      // Если существует src, устанавливаем фон для лупы     if (src) {       ui.glass.css({         'background-image': 'url(' + src + ')',         'background-repeat': 'no-repeat'       });     }

    // Проверяем есть ли запись о первоначальном размере картинки native_width/native_height    // если нет, значит вычисляем и создаем об этом запись для каждой картинки    // иначе показываем лупу с увеличением

      if (!cur_img.data('native_width')) {               // Создаем новый объект изображение, с актуальной идентичный актуальному изображению        // Это сделано для того чтобы получить реальные размеры изображения         // сделать напрямую мы этого не может, так как в атрибуте width указано др значение              var image_object = new Image();

        image_object.onload = function() {                   // эта функция выполнится только тогда после успешной загрузки изображения          // а до тех пор пока загружается native_width/native_height равны 0                    // определяем реальные размеры картинки          native_width = image_object.width;          native_height = image_object.height;

            // Записываем эти данные          cur_img.data('native_width', native_width);          cur_img.data('native_height', native_height);                    // Вызываем функцию mouseMove и происходит показ лупы           mouseMove.apply(this, arguments);          ui.glass.on('mousemove', mouseMove);              };

        image_object.src = src;            return;      } else {          // получаем реальные размеры изображения          native_width = cur_img.data('native_width');        native_height = cur_img.data('native_height');      }

    // Вызываем функцию mouseMove и происходит показ лупы    mouseMove.apply(this, arguments);    ui.glass.on('mousemove', mouseMove);  });

На этом все. Эффект лупы для изображений готов. Для более детального знакомства и уж тем более использования рекомендую скачать исходники, так как здесь приведен не весь код ❗

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на страницу ВКонтакте или добавляйте в круги на Google+. Не забывайте оставлять комментарии, спасибо!

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

xozblog.ru

Плагин WordPress Glass добавит на ваш сайт лупу для просмотра фотографий

C помощью этого простого и бесплатного плагина WordPress вы добавите на сайт возможность просмотра ваших фотографий с помощью эффекта под названием лупа (увеличительное стекло).

Этот плагин, со слов автора, отлично работает на мобильных устройствах (iPad) и многих других платформах и не нуждается в специальных скриптах Flash.

При наведении курсора на изображение в круглой части отображается увеличенное изображение выбранной области фотографии, как через просмотр с помощью увеличительного стекла (лупы). В настоящее время плагин поддерживает этот эффект только для файлов изображений в формате JPG и PNG.

Скачать плагин WordPress Glass можно в официальной библиотеке WordPress по адресу — http://wordpress.org/plugins/glass/

Установка плагина WordPress Glass — стандартная. После его активации у вас появится в разделе Параметры новая страница настроек этого плагина — Glass.

Страница на английском языке. Настройки по умолчанию можно не менять, плагин уже работает. Откройте любую запись, которая содержит изображения в формате JPG или PNG, наведите на фото курсор и убедитесь.

На частые вопросы разработчик плагина ответил примерно так:

Как настроить цвет оправы лупы?

Есть два способа настройки цвета обода (rim)

wordpress glass

Первый способ — настроить 16-ричное отображение выбранного вами цвета. По умолчанию стоит значение — CC6633 (я подчеркнул красным цветом настройку).

Второй способ — добавить абсолютный путь к папкам, в которых лежат готовые картинки увеличительного стекла и обода лупы. Путь для увеличительного стекла вы можете найти в подсказке по умолчанию на этой же странице (скриншот ниже):

wordpress glass2

Вам надо только добавить путь в левом окне. Если вместо картинки лупы вы хотите просто обод, тогда путь в конце заменить /spy на /rim.

wordpress glass3

или

wordpress glass4

Почему плохо работает в IE 5,6,7 и 8 сглаживание обода лупы?

Автор приносит извинения, но он не смог получить чистую работу этого плагина в этом браузере для этих версий. И в конце концов, почему вы до сих пор работаете в старых версиях браузера? Вам что, лень обновится? (это уже я не выдержал и дописал свое мнение).

Совет в конце от меня: не загружайте изображения больших форматов, например, больше 800х600px. Используйте средние значения для изображений и тогда эффект наведения лупы на фотографию будет особенно заметен.

И последнее — не спешите ругать автора или меня, плагин ведь — бесплатный.

Post Views: 35

skininfo.info

Плагин jQuery cloud-zoom – лупа для картинок

лупа картинки

От автора: Сегодня мы рассмотрим jQuery плагин cloud-zoom (лупа для картинок). При помощи него на странице можно просматривать изображения в увеличенном виде.

Почему именно он?

Потому что он включает в себя много разнообразных режимов просмотра изображения, хорошая совместимость всех браузеров, легок в обращении.

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Перейдем к рассмотрению урока.

Создайте папку folder и поместите в нее файл index.html со следующим кодом:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Плагин jQuery cloud-zoom</title> <link href="styles/cloud-zoom.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery-1.4.2.js"></script> <script type="text/JavaScript" src="js/cloud-zoom.1.0.2.min.js"></script> </head> <body> <h2>Режим "Фотогалерея"</h2> <a href='images/kharkov_big.jpg' class = 'cloud-zoom' rel="adjustX: 10, adjustY:-4"> <img src="images/kharkov_small.jpg" alt="" /> </a> <a href='images/kharkov_big.jpg' rel="useZoom: 'zoom1', smallImage: 'images/kharkov_small.jpg' "> <img src="images/kharkov_small.jpg" alt =""/> </a> <a href='images/kharkov_big_bw.jpg' rel="useZoom: 'zoom1', smallImage: 'images/kharkov_small_bw.jpg' "> <img src="images/kharkov_small_bw.jpg" alt =""/> </a> <h2>Режим "внутри"</h2> <a href="images/kharkov_big.jpg" rel="position: 'inside', adjustX: 0, adjustY:0"> <img src="images/kharkov_small.jpg" alt=""/> </a> <h2>Режим "размытие"</h2> <a href="images/kharkov_big.jpg" rel="position: 'right', adjustX: 14, adjustY:0, softFocus:true"> <img src="images/kharkov_small.jpg" alt=""/> </a> <h2>Режим "Цвет"</h2> <a href="images/kharkov_big.jpg" rel="tint: '#999', tintOpacity: 0.7, position: 'right', adjustX: 14, adjustY:0"> <img src="images/kharkov_small.jpg" alt="" title="Карта Харькова"/> </a> </body> </html>

После этого в папке folder создайте папку styles и поместите в нее файл cloud-zoom.css. Он должен содержать следующий код:

img{ border: none } h2{ margin: 50px 0 50px 0; }.cloud-zoom{ width: 200px; } .cloud-zoom-lens { border: 4px solid #888; margin: -4px; background-color: #fff; cursor: move; } .cloud-zoom-title { font-family: Arial, Helvetica, sans-serif; position: absolute !important; background-color: #000; color: #fff; padding: 3px; width: 100%; text-align: center; font-weight: bold; font-size: 10px; } .cloud-zoom-big { border: 4px solid #ccc; overflow: hidden; } .cloud-zoom-loading { background:#222; padding:3px; border:1px solid #000; }

Теперь осталось подключить ява-скрипты. Для этого в папке folder создайте папку js и поместите в нее два файла jquery-1.4.2.js и cloud-zoom.1.0.2.min.js.

После выполнения всех вышеуказанных действий в окне Вашего браузера можно будет увидеть следующее:

лупа картинки

Как Вы уже, наверное, поняли, данный плагин предусматривает несколько режимов увеличенного изображения. Чтобы увидеть эффект увеличения изображения определенного режима, Вам необходимо просто навести на изображение курсор мыши.

В случае режима "Фотогалерея" существует выбор изображения из списка для просмотра в увеличенном виде.

У каждого режима есть свои особенности.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Например, для того чтобы задать режим "Фотогалерея", объекту необходимо обязательно присвоить класс "cloud-zoom-gallery" и передать следующие параметры rel : useZoom: ‘zoom1′, smallImage: ‘картинка.jpg’.

<a href='images/kharkov_big.jpg' rel="useZoom: 'zoom1', smallImage: 'images/kharkov_small.jpg' "> <img src="images/kharkov_small.jpg" alt =""/> </a>

Аналогично для режима "Внутри":

<a href="images/kharkov_big.jpg" rel="position: 'inside', adjustX: 0, adjustY:0"> <img src="images/kharkov_small.jpg" alt=""/> </a>

режима "Размытие":

<a href="images/minsk_big.jpg" rel="position: 'right', adjustX: 14, adjustY:0, softFocus:true"> <img src="images/minsk_small.jpg" alt="" title="Карта Минска"/> </a>

режима "Цвет":

<a href="images/kharkov_big.jpg" rel="tint: '#999', tintOpacity: 0.7, position: 'right', adjustX: 14, adjustY:0"> <img src="images/kharkov_small.jpg" alt="" title="Карта Харькова"/> </a>

Урок окончен. Всем спасибо за внимание.

Заключение.

В данном уроке был рассмотрен jQuery плагин cloud-zoom(в простонародье – "лупа ").

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

Хотел бы также выделить достоинства этого плагина:

размер скрипта (порядка 6 Кб).

легкая интеграция в код.

киберсант-вебмастер

Источник: http://www.professorcloud.com

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

E-mail: [email protected]

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

webformyself.com


Смотрите также

Prostoy-Site | Все права защищены © 2018 | Карта сайта