Главная » jQuery » Zoom - Увеличение Изображения с jQuery

Zoom — Увеличение Изображения с jQuery

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

Сегодня я покажу Вам как создать простой эффект зума с помощью .

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

Zoom-эффект для фото

Пример посмотрели, теперь поехали!!!

Разметка 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

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

45 комментариев
  1. iF:

    В общем скрипт довольно таки хороший )) работает на Ура.

    Только вот столкнулся с такой проблемой при выравнивании в center выравнивания не происходит.

    Точнее увеличенная картинка остается выравненной как будто бы в topLeft (по умолчанию), а подпись к картинке выравнивается в center. В итоге получается что подпись смещена относительно увеличенной картинки влево.

    Пока не исправил этот глючек )) Кто сталкивался? Как решили?

    Ответить
    • driver:

      iF

      Копайте и экспериментируйте с параметрами position в классах .nivoZoomHover и .nivoCaption задавая отступы, или без них выравнивая text-align относительно картинки, так как вам нуна...

      Ответить
  2. MI:

    Привет! Скрипт шикарный!!! Скажите пожалуйста, как можно выровнять увеличенное изображение не относительно маленькой картинки (на которую щёлкаем) а относительно окна браузера?????

    очень много таких вопрос, ответа никак нет...

    Ответить
    • driver:

      MI здравствуйте.

      очень много таких вопрос, ответа никак нет...

      Как же нет ответа, очень даже есть, просто вы не очень внимательно читали комментарии. Тогда повторюсь, попробуйте добавить свойство margin экспериментируя со значениями, классу .nivoLarge. Так же следует помнить о позиционировании элементов внутри блока, и подписи к изображению (.nivoCaption) потребуется прописать свойство margin такое же как у масштабной картинки. В общем вариантов много...Надеюсь все у вас получится, даже если вы будете использовать старый, добрый метод «Тыка».

      Удачи!

      Ответить
  3. Mon@h:

    Привет.

    Подскажите, при проверке на локалке все ок — картинки выводятся как надо.

    при загрузке на сервак — не работает. в чем дело?

    Ответить
    • driver:

      Mon@h

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

      src="http://ваш сайт/js или как там у вас/jquery.nivo.zoom.pack.js".

      Так же и со стилями zoom-эффекта. В общем обратите внимание на подключение данного javascript к странице где вы планируете его использовать

      Ответить
  4. Красавчег, больше нечего добавить!

    Все внятно и понятно, что большая редкость!

    Ответить
  5. Evgeny:

    Здравствуйте,

    Скрипт хороший, спасибо, только вот есть небольшая проблема когда нажимаю картинка увеличивается, но при

    повторном клике обратно не уменьшается, проверял на разных

    браузерах и везде одинаково, помогите, пытаюсь разобраться, но

    никак не могу понять в чем ошибка кроется.

    Ответить
    • driver:

      День добрый.

      В примере, увеличенная картинка закрывается при нажатии именно на само изображение, а не вне его. Так настроена работа js. Если вам сложно разобраться с настройками скрипта, то посмотрите другие решения, не менее эффектные и функциональные: Это или Это

      Удачи!

      Ответить
  6. Evgeny:

    Добрый вечер, подскажите пожалуйста можно ли к nivo zoom, прикрутить nivo slider, то есть после того когда картинка увеличилась, мне нужно что бы она показывала слайды, если это возможно подскажите пожалуйста как это можно сделать?

    Ответить
    • driver:

      Вечер добрый.

      Можно, но зачем себя мучить, есть готовые решения и не только Nivo, выбирайте: Тынц »

      Ответить
      • Evgeny:

        Спасибо за предложение, попробую что нибудь подходящее найти.

        Ответить
        • driver:

          Для начала присмотритесь к галереям изображений на Highslide JS, очень много вариантов исполнения.

          Удачи!

  7. Алексей:

    можете подсказать как мне свезать 1.4.2 с 1.7 или выше потому как 1.7 не поддерживает некоторые функции 1.4.2

    в чем причина? у меня слайдер работает на 1.7 а ваш скрипт работает только на 1.4.2...

    может подскажете как мне сделать используя библиотеку 1.7 ?

    вот ссылка на слайдер внизу картинки при нажатие увеличиваются, но почему то все криво

    Ответить
    • Алексей:

      Вопрос не актуален я нашел другой способ увеличения изображений! Извиняюсь что потревожил!

      Ответить
      • driver:

        Здравствуйте, Алексей.

        Скрипт совсем не мой, может быть к сожалению)))

        Посмотрел галерею на вашем сайте, при подключении библиотеки jQuery версии 1.7, а именно она у вас и работает, с какого то перепуга съезжает увеличенная картинка при выводе в центре class="nivoZoom center". Но раз нашли другое решение, значит вопрос исчерпан, а я все же поищу на досуге «где собака порылась»)))

        Удачи!

        Ответить
        • Алексей:

          ))Если найдете будет прекрасно, скрипт в этом блоге мне больше понравился

  8. Сергей:

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

    ajax-ом, nivoZoom не хочет с ними работать. На стационарных изображениях все отлично. Куда копать — напишите)

    Ответить
    • driver:

      Как то не задавался этим вопросом, протестирую у себя с ajax-ом, и в ближайшее время отпишусь, самому стало интересно.

      Ответить
  9. Сергей:

    В общем копать нужно тут

    $(window).load (function ()

    При подгрузке ajax-ом функция не срабатывает, так как окно уже загружено, а ссылки с стилями подгружаются вместе с изображениями, позже. Работает по онклику или по маусапу, но коряво, изображения включаются на зум, но при выключении повторно включаются, в общем нужно придумать как обращаться к этой функции

    Вот так я ее немного переписал

    function TRTop () {

    $('body').nivoZoom ({

    speed:500,

    zoomHoverOpacity:0.8,

    overlay:false,

    overlayColor:'#333',

    overlayOpacity:0.5,

    captionOpacity:0.8

    });

    };

    вызывал по онклику или онмаусап но есть баги вообщем)

    Ответить
  10. Юрий:

    1. Устанавливаю плагин. «Архив не удалось установить. Корректных плагинов не найдено.».

    2. Как установить в увеличенную картинку кнопку «Закрыть»?

    3. Есть ли у плагина боковые стрелки?

    4. Этот плагин совместим с nivo slider?

    Ответить
    • driver:

      1. Это не плагин WP (ручками работать придётся) иногда и такое случается, знаете ли

      2. Мучительно долго, да и незачем.

      3. Нет, так как не галерея и не слайд-шоу.

      4. А кто же его знает?

      Ответить
  11. Станислав:

    Автору спасибо. Все работает. Очень приятно смотрится. Подскажите, где можно изменить click to zoom на своё, например «нажмите для увеличения»?

    Ответить
  12. Юра:

    Спасибо, реализовал на самописе

    Ответить
«12
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru