RealAdmin.ru

Увеличение фотографии на сайте по клику

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

При выводе большого количества фотографий на сайте следует размещать лишь их миниатюры, а при клике уже выводить изображение во всплывающем окне в полном размере. Проще всего реализовать такое увеличение при помощи библиотеки 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
Комментарии — 22
  1. avatar Варя 27 октября 2017, 19:28(был изменён) #
    Добрый день,
    Спасибо большое за Ваш материал.
    Мне он помог.
    1. avatar Константин 24 августа 2017, 15:11 #
      Здравствуйте! Спасибо за такое решение. Однако у меня используется рекапча на форму обратной связи. И если подключать плагин, то слетает рекапча
      http://bahily-biznes.ru/
      1. avatar Simkin Andrew 24 августа 2017, 17:20 #
        Добрый день. У тебя на сайте подключен плагин fancybox, попробуй его использовать:
        $("a[rel='colorbox']").fancybox();
        Как код может влиять на Гугловскую рекапчу не могу представить.
      2. avatar Максим 13 декабря 2016, 14:44 #
        Спасибо большое! все работает!
        1. avatar Simkin Andrew 13 декабря 2016, 21:01 #
          Пожалуйста. Если у кого-то не работает, скидывайте адрес страницы где не получается сделать, посмотрю и напишу в чём проблема.
          1. avatar Слава 03 мая 2017, 00:05 #
            Привет. Плагин супер, заработал с первого раза за исключением одного — на миниатюре лупа с крестиком при наведении не отображается (. Плиз хелп. http://www.svetoslava.ru/cataloge/cataloge_vech_0.html
            1. avatar Simkin Andrew 03 мая 2017, 09:22 #
              Это не относится к плагину. Это делал я с помощью стилей специально для этого сайта.
        2. avatar Александр 15 сентября 2016, 20:26 #
          При уходе выходящий кот подкупает.
          Пятерка автору золотая!
          1. avatar Simkin Andrew 16 сентября 2016, 09:22 #
            Спасибо… не зря сосиськи ест, помогает мальца в ведении сайта)
          2. avatar Аркадий 14 июня 2016, 00:06 #
            Не пойму в чем дело… При клике на миниатюру, она открывается в полный размер в этом же окне. Никаких всплывающих окон не появляется. Подскажите, что не так?? Вот на этой странице первые четыре картинки http://agatrt.ru/integraciya-ip-ats-agat-ux-s-crm-vozmozhnosti/ Очень надо разобраться. Спасибо.
            1. avatar Simkin Andrew 14 июня 2016, 08:59(был изменён) #
              Во-первых, плагин jquery.malihu.PageScroll2id.min.js отрабатывает с ошибкой. Из-за него возомжно. Во-вторых, я так и не увидел, где подключаются плагины jquery.lazyload.mini.js и jquery.colorbox-min.js
              1. avatar Аркадий 14 июня 2016, 12:14(был изменён) #
                Да, Вы правы. Почему то через хедер не подрубились библиотеки. После нормального подключения библиотек и стиля colorbox все заработало на ура! Благодарю.
            2. avatar Алексей 10 марта 2016, 23:20 #
              Все работает, но такая проблема: крестик и стрелки при нажатии появляются вверху, а внизу они неактивны.
              1. avatar Simkin Andrew 11 марта 2016, 10:04 #
                Что-то со стилями. Попробуй другие подключить, например, заменить /example5/ на /example4/ Или разбирайся, почему стили презапиываются.
              2. avatar Serhio 06 февраля 2016, 17:31 #
                Здравствуйте, сделал все как описано, скрипт заработал красота)
                но нету кнопок переключения между изображениями. выводится одна картинка и с управления только крестик — скажите как сделать чтоб были стрелочки когда 2 и больше картинок
                1. avatar Simkin Andrew 07 февраля 2016, 22:42 #
                  Если делал все как в примере, то стрелки должны быть. Чтобы иметь возможность листать изображения необходимо добавлять ссылкам атрибут rel="" как указано в примере
                2. avatar mrTorres.ru 05 февраля 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. avatar Simkin Andrew 06 февраля 2016, 12:08 #
                    Можешь строку с lazyload вообще убрать, сильно не повлияет:
                    $("img").lazyload({effect:"fadeIn"});
                    Если не поможет, значит с подключенным jquery что-то не так.
                  2. Комментарий был удален.
                    1. avatar Simkin Andrew 26 декабря 2015, 00:30 #
                      Конструкторы я вообще не переношу, это зло в сайтостроении. Так и не понял в чём вопрос и зачем в сообщении css стили. Не надо больше так писать сюда.
                    2. avatar Хизри 14 ноября 2015, 01:44 #
                      У меня тоже получилось с первого раза! Весь инет перерыл, только ваша рабочая! Спасибо огромное
                      1. avatar Виктор 30 августа 2015, 04:58 #
                        Мать моя женщина!

                        Спасибо огромное! С первого раза все получилось как нужно!
                        © REALADMIN.RU   2017 г.
                        Страница сгенерирована: 0,1219 s | 10 mb.
                        На каком уровне Вы играете в шахматы?
                        О П Р О С
                        Home Question Top