Zoom — Увеличение Изображения с jQuery
Доброго всем времени суток.
Наверняка большинство из Вас уже знакомы с интересным zoom-эффектом для фотографий. Для тех же кто еще прибывает в неведении немного поясню, идея заключается в плавном увеличении изображения при наведении или клике на него. Про работу такого же, но не много видоизмененного эффекта я рассказывал ранее: Эффект уменьшения фото с jQuery.
Сегодня я покажу Вам как создать простой эффект зума с помощью jQuery.
Использовать зум-эффект можно практически на любом сайте фотографов и фотогалерей, короче там где присутствуют фотографии и есть потребность в демонстрации изображений в различных масштабах.
Пример посмотрели, теперь поехали!!!
Разметка HTML
Чтобы все исправно работало необходимо подключить JQuery, script масштабирования и стили оформления CSS непосредственно к странице html:
<link rel="stylesheet" href="nivo-zoom.css" type="text/css" media="screen" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="jquery.nivo.zoom.pack.js" type="text/javascript"></script> |
Для правильной работы эффекта нам надо обернуть миниатюрное изображение в ссылку, указывающую на изображение, которое вы хотите, чтобы «увеличивалось», и присвоить ссылке класс «nivoZoom».
<a href="images/pic_large.jpg" class="nivoZoom"> <img src="images/pic.jpg" alt="" width="165"/> </a> |
Помимо этого вы можете добавить дополнительные значения к классу, чтобы изображение увеличивалось по-другому. Например с классом «nivoZoom center» увеличенное фото будет выводиться соответственно по центру. Вы также можете добавить подпись к увеличенному изображению, добавив Div с классом «nivoCaption».
<a href="images/pic_large.jpg" class="nivoZoom center"> <img src="images/pic.jpg" alt="" width="165"/> <div class="nivoCaption">Это пример подписи к изображению.</div> </a> |
Для изменения увеличения картинки используются следующие классы:
- topLeft (по умолчанию)
- topRight
- bottomLeft
- bottomRight
- center
Привлекает в этом эффекте то, что миниатюрам Вы сможете задать практически любой размер, меняя значения в параметре width=”###”, в нашем случае я установил ширину 165px.
Правда не стоит забывать, что качество теряется при превышении размеров исходного изображения.
CSS
С оформлением нашего эффекта через стиль, дела обстоят еще проще. В исходниках имеется файл стилей nivo-zoom.css, следующего содержания
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
.nivoZoomHover { position:absolute; top:0px; left:0px; z-index:9; width:100%; height:100%; cursor:pointer; } .nivoCaption { display:none; position:absolute; z-index:110; text-align:center; background:#010101; color:#fff; padding:4px 0; overflow:hidden; } |
Обертка для ссылки и изображения будет абсолютно позиционирована. С подписью тоже думаю мудрить не придется, ну разве только кому захочется сменить фон и цвет выводимого текста, код предельно мал и понятен.
Финальным аккордом всего действа, будет подключение к нашему документу, маленького скрипта использующего функцию загрузки окна $(window).load () :
<script type="text/javascript"> $(window).load(function() { $('body').nivoZoom(); }); </script> |
Zoom — эффект имеет много возможностей для настроек. Ниже приведен пример кода, настройки с помощью всех имеющихся вариантов и их значения по умолчанию, с небольшими пояснениями :
<script type="text/javascript"> $(window).load(function() { $('body').nivoZoom({ speed:500, // Скорость увеличения zoomHoverOpacity:0.8, // прозрачность увеличенного фото overlay:false, // наложение отсутствует overlayColor:'#333', // цвет наложения на картинку overlayOpacity:0.5, // прозрачность наложения captionOpacity:0.8 // Прозрачность подписи }); }); </script> |
Вот и все, наш замечательный эффект «зума» готов. Тихо смею надеяться, что всем все понятно и фишка сея Вам понравилась.
Источник, как это чаще всего и бывает, толковые буржуины: nivozoom.dev7studios.com
Подготовил и адаптировал для нашего брата: Shurawi
Большое спасибо за плагин, только после установки не отображаются иконки лупы при наведении и иконка загрузки изображения, подскажите пожалуйста, что необходимо указать, чтоб плагин работал также как на демо странице.
…пожалуйста.
просто эти самые файлы иконок необходимо иметь, в исходниках они есть, а чтоб работало надо поместить их в папку с вашими изображениями, чаще это /images и должно все работать.
Да, за плагин спасибо. Но все же при вставки файлов иконок лупы и загрузки в папку images с картинками — они не отображаются все равно…
В чем дело?
В файле стилей проверьте путь к картинкам, а чтоб не заморачиваться вбейте в ваш style.css следующее:
a.nivoZoom {border:0 ! important;
}
a.nivoZoom img {
-moz-box-shadow:0px 0px 5px #000;
-webkit-box-shadow:0px 0px 5px #000;
box-shadow:0px 0px 5px #000;
border:0;
}
a.nivoZoom img.nivoLarge {
-moz-box-shadow:0px 0px 10px #000;
-webkit-box-shadow:0px 0px 10px #000;
box-shadow:0px 0px 10px #000;
}
.nivoZoomHover {
background:url(images/zoom.png) no-repeat 50% 50%;
}
.nivoZoomHover.loading {
background:url(images/loading.gif) no-repeat 50% 50%;
border:4px solid #000;
width:16px;
height:16px;
top:43%;
left:43%;
opacity:0.8;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;
}
Должно все работать. Удачи.
Да и еще, Ваш сайт добавил себе в закладки 🙂 Отличный сайт 🙂 Молодцы :)!
И еще вопрос: параметры выравнивания
topLeft (по умолчанию)
topRight
bottomLeft
bottomRight
center
делают выравнивания лишь к картинке. А можно делать выравнивание по самой странице?
Здравствуйте.
Выравнивание применяется относительно миниатюры, т.е относительно ее краев. Например topleft выводит увеличенное изображение на уровне верхнего левого угла миниатюры, визуально левый угол большой картинки цепляется верхнего левого угла миниатюры, само изображение увеличивается в право и вниз.
По поводу вывода миниатюр на странице, это где угодно, в зависимости от стиля шаблона, в любом блоке, а уж там можно извращаться до безобразия, главное не переусердствовать…
В качестве примера можно отталкиваться от исходников демо-версии.
В записи, текстовом виджете или в другом месте, все как всегда с любым изображением:
<a href="images/monstersinc_large.jpg" class="nivoZoom" rel="nofollow"><img src="/images/monstersinc.jpg" alt="" width="165" /></a>
Меняете только класс, topLeft, topRight и т.д, картинка выводится в пределах нужного вам блока
Спасибо за помощь…буду пробовать…
обьясните плиз…
в хеде :
в боди
нифига не происходит
Код в комменте не отобразился, воспользуйтесь тегом
</code><code>А на вскидку могу предположить, что если миниатюра выводится а увеличенная картинка нет, то скорее ошибка в подключении jQuery к дакументу
Было бы здорово, если бы при клике на картинку предыдущая картинка (если увеличена) скрывалась, а то получается куча увеличенных окошек если их не закрывать.
Кто бы спорил… С такой функцией мало даже мощных галерей, но это вполне реализуемо, да и вообще, нет предела совершенсту, тем более с нашей то неуемной фантазией.
Спасибо огромное!!!!!
Привет ! обьясни что куда кидать, на блоге вордпресс, сижу и вникаю а понять не могу
Миха
Существует папочка с темой, в ней создаешь папку с рабочими скриптами, если нет такой, что то типа scripts, туда можешь смело положить файлик из исходников «jquery.nivo.zoom.pack.js», только незабывай правильно путь прописаить в header темы, будет примерно так:
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/scripts/jquery.nivo.zoom.pack.js"></script>Все тоже самое и с файлом стилей эффекта «nivo-zoom.css», можешь в отдельную папку «css», а можешь в корень темы, главное грамотно подключить и все будет работать. Ну, а с картинками думаю разберешься, в статье подробный расклад по выводу изображений расписан.
Картинка увеличиватся, но, по клику на закрывается, а как бы пропадает на мгновение, и снова увеличивается 🙁 … Куда копать ?
Артем, такой косяк наблюдается когда в браузерах используются дополнения или расширения для предварительного просмотра изображения, например в Opera 11 это «Image Preview Popup». Попробуйте отключить если пользуете и посмотрите, другого объяснения у меня пока нет, скрипт работает без проблем.
Привет! Скрипт шикарный!!! Скажите пожалуйста, как можно выровнять увеличенное изображение не относительно маленькой картинки (на которую щёлкаем) а относительно окна браузера?
Спасибо за скрипт. Только я ни чего не понял. Куда все эти коды вставлять (имеется в виду в шапку, в тело или ещё куда)? Сделал такЮ как понял- не работает. Я понимаю, что где-то ошибся. Очень хотелось бы поподробнее изложить данный материал (специально для тяжёлых чайников). Заранее спасибо.
Александр
Чтоб не заморачиваться все линки на файлы стилей, а также сами script пропишите в верху страницы, до закрывающего тега /head, ну и не забывайте где вы эти самые файлы положили у себя на сайте(правильный путь). А дальше уже работайте с наполнением. Смотрите исходники, сравнивайте. Удачи
В общем скрипт довольно таки хороший )) работает на Ура.
Только вот столкнулся с такой проблемой при выравнивании в center выравнивания не происходит.
Точнее увеличенная картинка остается выравненной как будто бы в topLeft (по умолчанию), а подпись к картинке выравнивается в center. В итоге получается что подпись смещена относительно увеличенной картинки влево.
Пока не исправил этот глючек )) Кто сталкивался? Как решили?
iF
Копайте и экспериментируйте с параметрами position в классах .nivoZoomHover и .nivoCaption задавая отступы, или без них выравнивая text-align относительно картинки, так как вам нуна…
Привет! Скрипт шикарный!!! Скажите пожалуйста, как можно выровнять увеличенное изображение не относительно маленькой картинки (на которую щёлкаем) а относительно окна браузера?????
очень много таких вопрос, ответа никак нет…
MI здравствуйте.
очень много таких вопрос, ответа никак нет…
Как же нет ответа, очень даже есть, просто вы не очень внимательно читали комментарии. Тогда повторюсь, попробуйте добавить свойство margin экспериментируя со значениями, классу .nivoLarge. Так же следует помнить о позиционировании элементов внутри блока, и подписи к изображению (.nivoCaption) потребуется прописать свойство margin такое же как у масштабной картинки. В общем вариантов много…Надеюсь все у вас получится, даже если вы будете использовать старый, добрый метод «Тыка».
Удачи!
Привет.
Подскажите, при проверке на локалке все ок — картинки выводятся как надо.
при загрузке на сервак — не работает. в чем дело?
Mon@h
Просматривая демо вы видите, что все работает, демо страница размещена на сервере и все же работает:))). Стало быть вы допускаете какую то ошибку при размещении плагина. Например, проверьте правильность пути до javascript, если загрузили в отдельную папку, то следует прописывать полный путь, типа :
src="https://ваш сайт/js или как там у вас/jquery.nivo.zoom.pack.js".Так же и со стилями zoom-эффекта. В общем обратите внимание на подключение данного javascript к странице где вы планируете его использовать
Красавчег, больше нечего добавить!
Все внятно и понятно, что большая редкость!
Юрий. Спасибо за хороший отзыв)))
Здравствуйте,
Скрипт хороший, спасибо, только вот есть небольшая проблема когда нажимаю картинка увеличивается, но при
повторном клике обратно не уменьшается, проверял на разных
браузерах и везде одинаково, помогите, пытаюсь разобраться, но
никак не могу понять в чем ошибка кроется.
День добрый.
В примере, увеличенная картинка закрывается при нажатии именно на само изображение, а не вне его. Так настроена работа js. Если вам сложно разобраться с настройками скрипта, то посмотрите другие решения, не менее эффектные и функциональные: Это или Это
Удачи!
Добрый вечер, подскажите пожалуйста можно ли к nivo zoom, прикрутить nivo slider, то есть после того когда картинка увеличилась, мне нужно что бы она показывала слайды, если это возможно подскажите пожалуйста как это можно сделать?
Вечер добрый.
Можно, но зачем себя мучить, есть готовые решения и не только Nivo, выбирайте: Тынц »
Спасибо за предложение, попробую что нибудь подходящее найти.
можете подсказать как мне свезать 1.4.2 с 1.7 или выше потому как 1.7 не поддерживает некоторые функции 1.4.2
в чем причина? у меня слайдер работает на 1.7 а ваш скрипт работает только на 1.4.2…
может подскажете как мне сделать используя библиотеку 1.7 ?
вот ссылка на слайдер внизу картинки при нажатие увеличиваются, но почему то все криво
Вопрос не актуален я нашел другой способ увеличения изображений! Извиняюсь что потревожил!
Здравствуйте, Алексей.
Скрипт совсем не мой, может быть к сожалению)))
Посмотрел галерею на вашем сайте, при подключении библиотеки jQuery версии 1.7, а именно она у вас и работает, с какого то перепуга съезжает увеличенная картинка при выводе в центре class=”nivoZoom center”. Но раз нашли другое решение, значит вопрос исчерпан, а я все же поищу на досуге «где собака порылась»)))
Удачи!
Добрый день! Скрипт хорош, но есть проблема, у меня изображения подгружаются
ajax-ом, nivoZoom не хочет с ними работать. На стационарных изображениях все отлично. Куда копать — напишите)
Как то не задавался этим вопросом, протестирую у себя с ajax-ом, и в ближайшее время отпишусь, самому стало интересно.
В общем копать нужно тут
$(window).load (function ()
При подгрузке ajax-ом функция не срабатывает, так как окно уже загружено, а ссылки с стилями подгружаются вместе с изображениями, позже. Работает по онклику или по маусапу, но коряво, изображения включаются на зум, но при выключении повторно включаются, в общем нужно придумать как обращаться к этой функции
Вот так я ее немного переписал
function TRTop () {
$(‘body’).nivoZoom ({
speed:500,
zoomHoverOpacity:0.8,
overlay:false,
overlayColor:’#333′,
overlayOpacity:0.5,
captionOpacity:0.8
});
};
вызывал по онклику или онмаусап но есть баги вообщем)
1. Устанавливаю плагин. «Архив не удалось установить. Корректных плагинов не найдено.».
2. Как установить в увеличенную картинку кнопку «Закрыть»?
3. Есть ли у плагина боковые стрелки?
4. Этот плагин совместим с nivo slider?
1. Это не плагин WP (ручками работать придётся) иногда и такое случается, знаете ли
2. Мучительно долго, да и незачем.
3. Нет, так как не галерея и не слайд-шоу.
4. А кто же его знает?
Автору спасибо. Все работает. Очень приятно смотрится. Подскажите, где можно изменить click to zoom на своё, например «нажмите для увеличения»?
Спасибо, реализовал на самописе