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

При выводе большого количества фотографий на сайте следует размещать лишь их миниатюры, а при клике уже выводить изображение во всплывающем окне в полном размере. Проще всего реализовать такое увеличение при помощи библиотеки 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».