Октябрь 29, 2019 Запись была обновлена
jQuery увеличение картинки
На просторах интернета я нашел одну очень интересную и полезную jQuery библиотеку для увеличения картинки. Как выглядит работа этого скрипта: Вы просто наводите на изображение и тот участок, на котором находится лупа показывается в увеличенном размере. Установка и настройка плагина очень проста и у Вас не должно возникнуть никаких проблем.
Взгляните на реальный пример jQuery увеличения картинки:
Посмотреть примерСкачать
Вот как выглядит это увеличение:
Как установить jQuery увеличение картинки
HTML часть
Подключаем библиотеку jQuery и плагин okzoom.js (здесь, либо берем из примера) перед закрывающим тегом </body>:
1 2 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="js/okzoom.js"></script> |
Сейчас нужно разместить изображение, которое будем увеличивать. Я к Новому Году рисовал в Photoshop оленей и Санта Клауса. Вот с этим изображением я и буду экспериментировать. Вставляем где-то между тегами <body> и </body> наше изображение, но задавая ему высоту меньше чем у оригинала:
1 | <img id="example" height="200" src="demo.jpg"> |
Я задал 200 пикселей высоту, хотя оригинальная высота 280. Это сделано специально, потому что при увеличении будет показываться оригинальное изображение. Также нужно задать уникальный идентификатор изображения, которое мы будем увеличивать. В моём случае это id="example". Осталось последнее действие.
jQuery часть
Затем перед закрывающим тегом </body> вставляем следующий код:
1 2 3 4 5 6 7 8 9 10 | <script> $(function(){ $('#example').okzoom({ width: 200, height: 200, border: "1px solid black", shadow: "0 0 5px #000" }); }); </script> |
Хочу сделать небольшие пояснения:
- #example — это и есть тот идентификатор, который мы писали у тега <img>.
- width — ширина лупы в пикселях.
- height — высота лупы в пикселях.
- border — цвет и вид границы лупы.
- shadow — тень от лупы.
Вывод
Как правило такой эффект часто применяется в интернет-магазинах при просмотре товаров. Но Вы смело можете использовать эту маленькую и легкую библиотеку на собственном сайте в своих целях.
Успехов!
Еще материалы по этой теме
Спасибо за ваше обращение!
Мы свяжемся с вами в течение 2-х часов (график работы: пн-пт, с 10 до 19)
Вот ещё бы это всё было респонсив 😮 , тогда другое дело
Спасибо Юра, как всегда полезный урок! 😉
Спасибо, Константин!
Здравствуйте, Юрий, а если несколько изображений увеличивать и применять один идентификатор #example для всех картинок, то это будет ошибкой по мнению W3C валидатора. На одной странице допускается только 1 уникальный ID
Если нужно подключать увеличение для нескольких картинок, то нужно в скрипте создать массив.
var mass = [»,’-1′,’-2′];
for(i=0; i<3;i++)
$(function(){
$('#example'+mass[i]).okzoom({
width: 200,
height: 200,
border: "1px solid black",
shadow: "0 0 5px #000"
});
});
И как видно из скрипта, теперь мы без проблем можем подключать 3 картинки, но обязательно с идентификаторами
id=example-1
id=example-2
id=example-3
Можно хоть сколько картинок подключать, меняя в функции <3
Ошибочка,
идентификаторы в именно данном случае будут
example
example-1
example-2
Можно функцию переписать что-бы не использовать массив, но это не в тему.
🙂
Плагин конечно замечательный и красивый, но вот проблемка: он резко перестаёт работать, если в файлах попадаются кириллические символы.
Вы случайно не знаете ли как исправить этот баг, автор?