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
Комментарии — 15
  1. avatar Виктор 30 августа 2015, 04:58 #
    Мать моя женщина!

    Спасибо огромное! С первого раза все получилось как нужно!
    1. avatar Хизри 14 ноября 2015, 01:44 #
      У меня тоже получилось с первого раза! Весь инет перерыл, только ваша рабочая! Спасибо огромное
      1. Комментарий был удален.
        1. avatar Simkin Andrew 26 декабря 2015, 00:30 #
          Конструкторы я вообще не переношу, это зло в сайтостроении. Так и не понял в чём вопрос и зачем в сообщении css стили. Не надо больше так писать сюда.
        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. avatar Serhio 06 февраля 2016, 17:31 #
            Здравствуйте, сделал все как описано, скрипт заработал красота)
            но нету кнопок переключения между изображениями. выводится одна картинка и с управления только крестик — скажите как сделать чтоб были стрелочки когда 2 и больше картинок
            1. avatar Simkin Andrew 07 февраля 2016, 22:42 #
              Если делал все как в примере, то стрелки должны быть. Чтобы иметь возможность листать изображения необходимо добавлять ссылкам атрибут rel="" как указано в примере
            2. avatar Алексей 10 марта 2016, 23:20 #
              Все работает, но такая проблема: крестик и стрелки при нажатии появляются вверху, а внизу они неактивны.
              1. avatar Simkin Andrew 11 марта 2016, 10:04 #
                Что-то со стилями. Попробуй другие подключить, например, заменить /example5/ на /example4/ Или разбирайся, почему стили презапиываются.
              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 Александр 15 сентября 2016, 20:26 #
                  При уходе выходящий кот подкупает.
                  Пятерка автору золотая!
                  1. avatar Simkin Andrew 16 сентября 2016, 09:22 #
                    Спасибо… не зря сосиськи ест, помогает мальца в ведении сайта)
                  © REALADMIN.RU   2016 г.
                  Страница сгенерирована: 0,0985 s | 10 mb.
                  На каком уровне Вы играете в шахматы?
                  О П Р О С
                  Home Question Top