Плагин 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' }); } 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)
Первый способ — настроить 16-ричное отображение выбранного вами цвета. По умолчанию стоит значение — CC6633 (я подчеркнул красным цветом настройку).
Второй способ — добавить абсолютный путь к папкам, в которых лежат готовые картинки увеличительного стекла и обода лупы. Путь для увеличительного стекла вы можете найти в подсказке по умолчанию на этой же странице (скриншот ниже):
Вам надо только добавить путь в левом окне. Если вместо картинки лупы вы хотите просто обод, тогда путь в конце заменить /spy на /rim.
или
Почему плохо работает в 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 создайте папку 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
