RealAdmin.ru

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

Увеличение фото на сайте по клику на jquery
Категория: Сайтострой
Комментарии: 23

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

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

  • «jQuery v2.0.3»;
  • «Colorbox v1.4.31»;

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

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

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

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

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

<script>
$(function(){
    $("a.colorbox").colorbox({current:"Фото {current} из {total}"});
});
</script>

Сами изображения на странице должны выгдяеть так:

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

Ключевыми свойствами здесь является класс colorbox и атрибут rel="group-1". Класс указывает скрипту, при нажатии на какие ссылки нужно увеличивать внутреннюю картинку, а атрибут «rel» позволит во всплывающем окне листать все изображения одинаковым значением.

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

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

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

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

Автоматическое всплытие

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

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

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

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

    Спасибо огромное! С первого раза все получилось как нужно!
    1. Хизри14 ноября 2015, 01:44#
      У меня тоже получилось с первого раза! Весь инет перерыл, только ваша рабочая! Спасибо огромное
      1. Комментарий был удален.
        1. Andy Si26 декабря 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. Andy Si06 февраля 2016, 12:08#
            Можешь строку с lazyload вообще убрать, сильно не повлияет:
            $("img").lazyload({effect:"fadeIn"});
            Если не поможет, значит с подключенным jquery что-то не так.
          2. Serhio06 февраля 2016, 17:31#
            Здравствуйте, сделал все как описано, скрипт заработал красота)
            но нету кнопок переключения между изображениями. выводится одна картинка и с управления только крестик — скажите как сделать чтоб были стрелочки когда 2 и больше картинок
            1. Andy Si07 февраля 2016, 22:42#
              Если делал все как в примере, то стрелки должны быть. Чтобы иметь возможность листать изображения необходимо добавлять ссылкам атрибут rel="" как указано в примере
            2. Алексей10 марта 2016, 23:20#
              Все работает, но такая проблема: крестик и стрелки при нажатии появляются вверху, а внизу они неактивны.
              1. Andy Si11 марта 2016, 10:04#
                Что-то со стилями. Попробуй другие подключить, например, заменить /example5/ на /example4/ Или разбирайся, почему стили презапиываются.
              2. Аркадий14 июня 2016, 00:06#
                Не пойму в чем дело… При клике на миниатюру, она открывается в полный размер в этом же окне. Никаких всплывающих окон не появляется. Подскажите, что не так?? Вот на этой странице первые четыре картинки http://agatrt.ru/integraciya-ip-ats-agat-ux-s-crm-vozmozhnosti/ Очень надо разобраться. Спасибо.
                1. Andy Si14 июня 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. Andy Si16 сентября 2016, 09:22#
                    Спасибо… не зря сосиськи ест, помогает мальца в ведении сайта)
                  2. Максим13 декабря 2016, 14:44#
                    Спасибо большое! все работает!
                    1. Andy Si13 декабря 2016, 21:01#
                      Пожалуйста. Если у кого-то не работает, скидывайте адрес страницы где не получается сделать, посмотрю и напишу в чём проблема.
                      1. Слава03 мая 2017, 00:05#
                        Привет. Плагин супер, заработал с первого раза за исключением одного — на миниатюре лупа с крестиком при наведении не отображается (. Плиз хелп. http://www.svetoslava.ru/cataloge/cataloge_vech_0.html
                        1. Andy Si03 мая 2017, 09:22#
                          Это не относится к плагину. Это делал я с помощью стилей специально для этого сайта.
                    2. Константин24 августа 2017, 15:11#
                      Здравствуйте! Спасибо за такое решение. Однако у меня используется рекапча на форму обратной связи. И если подключать плагин, то слетает рекапча
                      http://bahily-biznes.ru/
                      1. Andy Si24 августа 2017, 17:20#
                        Добрый день. У тебя на сайте подключен плагин fancybox, попробуй его использовать:
                        $("a[rel='colorbox']").fancybox();
                        Как код может влиять на Гугловскую рекапчу не могу представить.
                      2. Варя27 октября 2017, 19:28(был изменён)#
                        Добрый день,
                        Спасибо большое за Ваш материал.
                        Мне он помог.
                        1. Гурген29 марта 2019, 20:40#
                          Добрый день! Спасибо Вам за отличный материал. На битриксе все работает!
                          © REALADMIN.RU   2019 г.
                          Страница сгенерирована: 0,3146 s | 12 mb.
                          На каком уровне Вы играете в шахматы?
                          О П Р О С