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

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

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

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

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

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

 

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

Для подключения скачиваем архив, распаковываем и загружаем на сайт. Затем в коде сайта (например, перед закрывающимся тегом 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 события.