От автора: приветствую вас! Позвольте представить вам очередной плагин из разряда must have. Сегодня мы познакомимся с замечательным jQuery плагином, который позволит вам организовать интересную jQuery галерею, похожую на галерею картинок Google. К тому же данный плагин предлагает нам jQuery сетку. Итак, jQuery галерея и jQuery сетка, начнем.
Итак, сегодня мы работаем с плагином под названием MG Space. Это действительно оригинальный и потрясный плагин, который позволит вам организовать jQuery галерею изображений примерно в том же стиле, что и картинки Google. То есть, у нас есть некоторая базовая картинка, при клике по которой под ней открывается панель с дополнительными картинками. Смотрится очень интересно.
Как обычно, перейдем на страницу плагина и скачаем его архив, после чего подключим необходимые файлы плагина jQuery галерея.
|
1 2 3 |
<link href="css/mg-space.css" rel="stylesheet"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/jquery.mg-space.js"></script> |
Теперь самое сложное — разметка. Хотя на самом деле ничего сложного здесь, конечно же, нет — просто главное не запутаться, чтобы получилась jQuery сетка. Итак, первым делом нам потребуется общий контейнер, которому мы дадим класс mg-space-init:
|
1 2 |
<div class="container content mg-space-init"> </div> |
Далее нам потребуется внутрь контейнера поместить базовые картинки в блок с классом mg-rows:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="container content mg-space-init"> <div class="row mg-rows"> <div class="col-sm-4"> <a href="#" class="mg-trigger"><img src="//unsplash.it/300/200?image=0"></a> </div> <div class="col-sm-4"> <a href="#" class="mg-trigger"><img src="//unsplash.it/300/200?image=10"></a> </div> <div class="col-sm-4"> <a href="#" class="mg-trigger"><img src="//unsplash.it/300/200?image=20"></a> </div> </div> </div> |
Осталось дело за малым — после блока базовых картинок разместить блок с классом mg-targets внутрь которого, в свою очередь, помещаются блоки с нужными данными. Количество таких блоков должно соответствовать количеству базовых изображений. Пример полной итоговой верстки вы можете посмотреть в исходниках к статье:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<div class="container content mg-space-init"> <div class="row mg-rows"> <div class="col-sm-4"> <a href="#" class="mg-trigger"><img src="//unsplash.it/300/200?image=0"></a> </div> </div> <div class="mg-targets"> <div> <div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <img src="//unsplash.it/300/200?image=0" class="thumbnail"> </div> <div class="col-md-4 col-sm-6"> <img src="//unsplash.it/300/200?image=1" class="thumbnail"> </div> <div class="col-md-4 col-sm-6"> <img src="//unsplash.it/300/200?image=2" class="thumbnail"> </div> <div class="col-md-4 col-sm-6"> <img src="//unsplash.it/300/200?image=3" class="thumbnail"> </div> <div class="col-md-4 col-sm-6"> <img src="//unsplash.it/300/200?image=4" class="thumbnail"> </div> <div class="col-md-4 col-sm-6"> <img src="//unsplash.it/300/200?image=5" class="thumbnail"> </div> </div> </div> </div> </div> </div> |
Ну и само собой — вызов метода плагина jQuery галереи — mgSpace:
|
1 2 3 |
$(function(){ $('.mg-space-init').mgSpace(); }); |
Клик по базовой картинке теперь должен открывать соответствующую панель с вложенными изображениями.
Красота, не так ли? jQuery сетка и jQuery галерея в одном флаконе. Ну а у меня на этом все. Исходники к статье вы можете скачать по ссылке. Больше о jQuery и JavaScript вы можете узнать из наших уроков или курса. Удачи!
