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

Категория: Сайтострой
- «jQuery v2.0.3»;
- «Colorbox v1.4.31»;
- «Lazy Load 1.9.3».
Подключение библиотеки и плагинов
Для подключения скачиваем архив, распаковываем и загружаем на сайт. Затем в коде сайта (например, перед закрывающимся тегом 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>
$("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({ href: "/images/hello.jpg", });Вызов кода приведёт к всплытию окна «colorbox» с изображением «hello.jpg». Код может быть вызыван внутри любого javascript события.
24
20871
Посмотрите похожее — 6
Комментарии —
Спасибо огромное! С первого раза все получилось как нужно!
в консоли такие ошибки:
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
но нету кнопок переключения между изображениями. выводится одна картинка и с управления только крестик — скажите как сделать чтоб были стрелочки когда 2 и больше картинок
Пятерка автору золотая!
http://bahily-biznes.ru/
Как код может влиять на Гугловскую рекапчу не могу представить.
Спасибо большое за Ваш материал.
Мне он помог.