RealAdmin.ru

Увеличение изображения на сайте по клику

HTML,Веб-дизайн,jQuery
Категория: Сайтострой
22 февр. 2014 г.

При выводе большого количества фотографий на сайте следует размещать лишь их миниатюры, а при клике уже выводить изображение во всплывающем окне в полном размере. Проще всего реализовать такое увеличение при помощи библиотеки jquery и плагина «colorbox». Дополнительно приведу пример использования плагина «lazyload».

Чтобы не искать плагины по отдельности, предлагаю скачать их одним архивом. Но моменту прочтения статьи могут появиться новые версии, поэтому можете поискать свежие версии — они бесплатны. Архив содержит:

  • «jQuery v2.0.3»;
  • «Colorbox v1.4.31»;
  • «Lazy Load 1.9.3».

«Colorbox» отвечает за вывод увеличенного изображения во всплывающем окне. «Lazy Load» предназначен для загрузки изображений только в момент их показа на экране. Это позволяет ускорить загрузку страницы и снизить нагрузку на веб-сервер, хотя работать всё будет и без него. Библиотека «jQuery» в представлении, надеюсь, не нуждается.

Пример работы:

Увеличение фото на сайте. Пример 1.   Увеличение фото на сайте. Пример 2.

Подключение библиотеки и плагинов

Для подключения скачиваем архив, распаковываем и загружаем на сайт. Затем в коде сайта (например, перед закрывающимся тегом body) размещаем код:

<link rel="stylesheet" type="text/css" href="/plugins/colorbox/example5/colorbox.css">
<script src="/plugins/jquery.min.js"></script>
<script src="/plugins/jquery.lazyload.mini.js"></script>
<script src="/plugins/colorbox/jquery.colorbox-min.js"></script>

<script>
$(document).ready(function () {
    $("img").lazyload({effect:"fadeIn"});
    $("a[rel='colorbox']").colorbox({current:"Фото {current} из {total}"});
});
</script>

Приступаем к подготовке изображений. Для этого следует подготовить фото, которое будет показываться в полный размер и миниатюру. Миниатюры можно сделать в любом графическом редакторе, либо использовать основное фото, прописав для тега «img» аттрибуты «width» и «height» меньше чем у оригинала. Второй вариант не является правильным, так как при большом количестве изображений может значительно замедлиться загрузка страницы.

«Colorbox» можно вызывать с параметрами. Чтобы выводимое изображение масштабировалось по размеру экрана укажите процентные значения для максимальной ширины и высоты. Так же можно настраивать прозрачность фона, формат надписи под изображением и другое.

$("a[rel='colorbox']").colorbox({
    maxWidth:"90%",
    maxHeight:"90%",
    opacity:"0.7",
    current: "изображение {current} из {total}"
});

После подготовки и загрузки изображений размещаем на сайте html разметку:

<a rel="colorbox" href="/images/1.jpg" >
     <img src="/images/1-mini.jpg" />
</a> 

В ссылке указываем путь к фотографии в полном размере, а в теге «img» — к миниатюре. Если всё проделано правильно, то должно работать.

Что делать если не заработало:

  • Проверьте правильность путей к плагинам.
  • Убедитесь что jquery библиотека подключена один раз.
  • Попробуйте поискать свежие версии плагинов и jquery библиотеки.
  • Плагин может не работать в CMS Joomla, так как jquery часто конфликтует с фреймворком Mootools.

Вешаем открытие окна с фотографией на любое событие

Иногда требуется открыть всплывающее окно «colorbox» при нажатии на текстовую ссылку или при наведении мыши на определённый блок сайта. Это можно сделать с помощью обращения к «colorbox» с параметром «href».

$.colorbox({
    href: "/images/hello.jpg",
});

Вызов кода приведёт к всплытию окна «colorbox» с изображением «hello.jpg». Код может быть вызыван внутри любого javascript события.

Посмотрите похожее — 6
Комментарии —
  1. Виктор30 августа 2015, 04:58#
    Мать моя женщина!

    Спасибо огромное! С первого раза все получилось как нужно!
    1. Хизри14 ноября 2015, 01:44#
      У меня тоже получилось с первого раза! Весь инет перерыл, только ваша рабочая! Спасибо огромное
      1. Комментарий был удален.
        1. Simkin Andrew26 декабря 2015, 00:30#
          Конструкторы я вообще не переношу, это зло в сайтостроении. Так и не понял в чём вопрос и зачем в сообщении css стили. Не надо больше так писать сюда.
        2. mrTorres.ru05 февраля 2016, 17:53#
          Перестал работать, не могу понять почему =(
          в консоли такие ошибки:

          Uncaught TypeError: $(...).lazyload is not a function(anonymous function)
          @ perevozka-spectehniki:538o
          @ jquery-1.7.2.min.js:3p.fireWith
          @ jquery-1.7.2.min.js:3e.extend.ready
          @ jquery-1.7.2.min.js:3c.addEventListener.B @ jquery-1.7.2.min.js:3
          1. Simkin Andrew06 февраля 2016, 12:08#
            Можешь строку с lazyload вообще убрать, сильно не повлияет:
            $("img").lazyload({effect:"fadeIn"});
            Если не поможет, значит с подключенным jquery что-то не так.
          2. Serhio06 февраля 2016, 17:31#
            Здравствуйте, сделал все как описано, скрипт заработал красота)
            но нету кнопок переключения между изображениями. выводится одна картинка и с управления только крестик — скажите как сделать чтоб были стрелочки когда 2 и больше картинок
            1. Simkin Andrew07 февраля 2016, 22:42#
              Если делал все как в примере, то стрелки должны быть. Чтобы иметь возможность листать изображения необходимо добавлять ссылкам атрибут rel="" как указано в примере
            2. Алексей10 марта 2016, 23:20#
              Все работает, но такая проблема: крестик и стрелки при нажатии появляются вверху, а внизу они неактивны.
              1. Simkin Andrew11 марта 2016, 10:04#
                Что-то со стилями. Попробуй другие подключить, например, заменить /example5/ на /example4/ Или разбирайся, почему стили презапиываются.
              2. Аркадий14 июня 2016, 00:06#
                Не пойму в чем дело… При клике на миниатюру, она открывается в полный размер в этом же окне. Никаких всплывающих окон не появляется. Подскажите, что не так?? Вот на этой странице первые четыре картинки http://agatrt.ru/integraciya-ip-ats-agat-ux-s-crm-vozmozhnosti/ Очень надо разобраться. Спасибо.
                1. Simkin Andrew14 июня 2016, 08:59(был изменён)#
                  Во-первых, плагин jquery.malihu.PageScroll2id.min.js отрабатывает с ошибкой. Из-за него возомжно. Во-вторых, я так и не увидел, где подключаются плагины jquery.lazyload.mini.js и jquery.colorbox-min.js
                  1. Аркадий14 июня 2016, 12:14(был изменён)#
                    Да, Вы правы. Почему то через хедер не подрубились библиотеки. После нормального подключения библиотек и стиля colorbox все заработало на ура! Благодарю.
                2. Александр15 сентября 2016, 20:26#
                  При уходе выходящий кот подкупает.
                  Пятерка автору золотая!
                  1. Simkin Andrew16 сентября 2016, 09:22#
                    Спасибо… не зря сосиськи ест, помогает мальца в ведении сайта)
                  2. Максим13 декабря 2016, 14:44#
                    Спасибо большое! все работает!
                    1. Simkin Andrew13 декабря 2016, 21:01#
                      Пожалуйста. Если у кого-то не работает, скидывайте адрес страницы где не получается сделать, посмотрю и напишу в чём проблема.
                      1. Слава03 мая 2017, 00:05#
                        Привет. Плагин супер, заработал с первого раза за исключением одного — на миниатюре лупа с крестиком при наведении не отображается (. Плиз хелп. http://www.svetoslava.ru/cataloge/cataloge_vech_0.html
                        1. Simkin Andrew03 мая 2017, 09:22#
                          Это не относится к плагину. Это делал я с помощью стилей специально для этого сайта.
                    2. Константин24 августа 2017, 15:11#
                      Здравствуйте! Спасибо за такое решение. Однако у меня используется рекапча на форму обратной связи. И если подключать плагин, то слетает рекапча
                      http://bahily-biznes.ru/
                      1. Simkin Andrew24 августа 2017, 17:20#
                        Добрый день. У тебя на сайте подключен плагин fancybox, попробуй его использовать:
                        $("a[rel='colorbox']").fancybox();
                        Как код может влиять на Гугловскую рекапчу не могу представить.
                      2. Варя27 октября 2017, 19:28(был изменён)#
                        Добрый день,
                        Спасибо большое за Ваш материал.
                        Мне он помог.
                        1. Гурген29 марта 2019, 20:40#
                          Добрый день! Спасибо Вам за отличный материал. На битриксе все работает!
                          © REALADMIN.RU   2019 г.
                          Страница сгенерирована: 0,1933 s | 6 mb.
                          На каком уровне Вы играете в шахматы?
                          О П Р О С
                          Home Question Top