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» отвечает за увеличение изображения и его оформление. Для этого в архиве имеется 5 тем. «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}"
});

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

<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
Комментарии — 21
  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,1903 s | 10 mb.
                      На каком уровне Вы играете в шахматы?
                      О П Р О С
                      Home Question Top