Адаптивная галерея · Json Data & Bootstrap

алерея - Json Data & Bootstrap

Адаптивная галерея в работе которой используется текстовый формат обмена данными Json и плагин Bootstrap, оснащена красивым модальным окном, актуальна для отображения во всех устройствах включая планшеты и мобильные телефоны.

Подключение и настройка галереи Json Data & Bootstrap

Подключение стилей CSS

Подключите в зону <head>, на страницах с галереей файл стилей.

<link href="//atmpl.ru/design/galleries/2014/json-data/gallery-json-data.css" rel="stylesheet" />

Подключение внешнего скрипта

Вам потребуется создать файл с расширением .js в котором будут находиться данные галереи, вот шаблон на 6 материалов которых может быть любое чётное количество. После изменений закачайте получившийся файл на сервер своего сайта.

{
"gallery":[
 { 
 "id":1,
 "author":"Автор картинки",
 "title":"Название картинки 1",
 "description":"Краткое описание картинки",
 "photo":"http://atmpl.ru/design/galleries/2014/json-data/gallery-json-data-1.jpg",
 "content":"Здесь будет находиться подробное описание картинки или фото из галереи, рекомендуем не использовать более 250 символов."
 },
 { 
 "id":2,
 "author":"Автор картинки",
 "title":"Название картинки 2",
 "description":"Краткое описание картинки",
 "photo":"http://atmpl.ru/design/galleries/2014/json-data/gallery-json-data-2.jpg",
 "content":"Здесь будет находиться подробное описание картинки или фото из галереи, рекомендуем не использовать более 250 символов."
 },
 { 
 "id":3,
 "author":"Автор картинки",
 "title":"Название картинки 3",
 "description":"Краткое описание картинки",
 "photo":"http://atmpl.ru/design/galleries/2014/json-data/gallery-json-data-3.jpg",
 "content":"Здесь будет находиться подробное описание картинки или фото из галереи, рекомендуем не использовать более 250 символов."
 },
 { 
 "id":4,
 "author":"Автор картинки",
 "title":"Название картинки 4",
 "description":"Краткое описание картинки",
 "photo":"http://atmpl.ru/design/galleries/2014/json-data/gallery-json-data-4.jpg",
 "content":"Здесь будет находиться подробное описание картинки или фото из галереи, рекомендуем не использовать более 250 символов."
 },
 { 
 "id":5,
 "author":"Автор картинки",
 "title":"Название картинки 5",
 "description":"Краткое описание картинки",
 "photo":"http://atmpl.ru/design/galleries/2014/json-data/gallery-json-data-5.jpg",
 "content":"Здесь будет находиться подробное описание картинки или фото из галереи, рекомендуем не использовать более 250 символов."
 },
 { 
 "id":6,
 "author":"Автор картинки",
 "title":"Название картинки 6",
 "description":"Краткое описание картинки",
 "photo":"http://atmpl.ru/design/galleries/2014/json-data/gallery-json-data-6.jpg",
 "content":"Здесь будет находиться подробное описание картинки или фото из галереи, рекомендуем не использовать более 250 символов."
 }
 ]
}

Подключение скрипта управления

Подключив отредактированный внешний файл скрипта, разместите перед закрывающим тегом </body> скрипт управления галереей.

<script>
var gallery = (function(){
 'use strict';
 var js_url ='http://atmpl.ru/design/galleries/2014/json-data/gallery-json-data.js';
 var clickEvent = (('ontouchstart' in window) || (window.DocumentTouch && document instanceof DocumentTouch)) ? 'touchstart' : 'click';
 return {
 js: function(e){
 return $("[data-js="+e+"]");},
 lk: function(e){
 return $("[data-lk="+e+"]");},
 ready_: function(){
 this.json();
 },
 events:function(){
 var self = this;
 var k = $('a[data-js]');
 k.each(function(i, v){
 i = i+1;
 self.clickOn(i);
 }); 
 self.clx();
 },
 clickOn: function(i){
 var self = this;
 this.js(i).bind(clickEvent,function(e){
 self.fx_in(self.lk(i)); 
 });
 }, 
 clx:function(){
 $('.modal').append('<a href="#" class="close"><span class="glyphicon glyphicon-remove"></span></a>');
 $('.close').bind(clickEvent,function(e){
 $('.modal').fadeOut('slow');
 $('body').css({overflow:'auto'});
 });
 },
 fx_out: function(el){
 el.fadeOut('slow');
 $('body').css({overflow:'auto'});
 }, 
 fx_in: function(el){
 el.fadeIn('slow');
 // hide scroll
 $('body').css({overflow:'hidden'});
 },
 json:function(){
 var self = this,out = '';
 var js = $.getJSON(js_url,function(data){
 $.each(data.gallery,function(i,el){
 out += self.tmpl(
 el.id,
 el.author,
 el.title,
 el.photo,
 el.description,
 el.content);
 });
 }).fail(function() {
 $('.gallery').html('Произошла ошибка загрузки данных.');
 }); 
 js.complete(function() {
 $('.gallery').html(out);
 self.events();
 });
 },
 tmpl:function(id,author,title,photo,desc,content){
 var self = this;
 var template = '<article class="col-md-6">'+
 ' <span class="gallery-article">'+
 ' <a href="#" data-js="'+id+'">'+
 ' <em class="author">'+author+'</em>'+
 ' <img src="'+photo+'" alt="'+title+'" /><span>'+
 ' <h3>'+title+'</h3>'+
 ' <p>'+desc+'</p>'+
 ' </span>'+
 ' </a>'+
 ' </span>'+
 ' <div data-lk="'+id+'" class="modal">'+
 ' <em class="author-modal"><b>Автор: </b>'+author+'</em>'+
 ' <div class="modal-block">'+
 ' <img src="'+photo+'" alt="" />'+
 ' <h3>'+title+'</h3>'+
 ' <p>'+content+'</p>'+
 ' </div>'+
 ' </div>'+
 '</article>';
 return template;
 },
 notifyMe: function(el) {
 if (!("Notification" in window)) {
 alert("Этот браузер не поддерживает уведомления");
 }
 else if (Notification.permission === "granted") {
 var n = new Notification(el);
 }
 else if (Notification.permission !== 'denied') {
 Notification.requestPermission(function (permission) {
 if(!('permission' in Notification)) {
 Notification.permission = permission;
 }
 if (permission === "granted") {
 var n = new Notification(el);
 }
 });
 }
 }
 };
})();
gallery.ready_();
$(".modal").on("show.bs.modal", function(){
var $bodyWidth = $("body").width();
$("body").css({'overflow-y': "hidden"}).css({'padding-right': ($("body").width()-$bodyWidth)});
});
$(".modal").on("hidden.bs.modal", function(){
$("body").css({'padding-right': "0", 'overflow-y': "auto"});
});
</script>

Найдите в скрипте управления строку которая указана ниже, и измените путь к внешнему скрипту с данными галереи на свой.

 var js_url ='http://atmpl.ru/design/galleries/2014/json-data/gallery-json-data.js';

Установка галереи Json Data & Bootstrap

Все данные галереи находятся во внешнем скрипте, который подключается через скрипт управления. Ваша вёрстка должна иметь структуру, построенную при использовании фреймворка bootstrap. Там где у Вас будет находиться галерея, разместите HTML код активации.

<div class="col-md-12">
<section class="gallery"></section>
</div>

Обратите внимание! Мы использовали селекторы плагина bootstrap как возможный вариант, разметка в скрипте управления делится на class="col-md-6", тоесть на 2 части от применённого класса к элементу подключения class="col-md-12", Вы можете изменить имена селекторов по своему усмотрению.

Демо галереи Json Data & Bootstrap

В поле редактора находится работоспособный код который Вы можете проверить, для проверки нажмите на значёк выполнения.

Проверка галереи на адаптивность

Галерея прошла тест на адаптивность к устройствам различных разрешений. Вы можете сами произвести проверку, для этого скопируйте ссылку на страницу, перейдите на страницу теста, вставьте ссылку в поле и нажмите Enter.

//atmpl.ru/design/galleries/2014/json-data/test-adaptive-gallery-json-data.html
Тест на адаптивность галереи Json Data & Bootstrap

Рейтинг: 5.0/5 из 4



Добавлено Автор Ник Источник Просмотров Комментариев Теги
09-12-2014 Михаил Меренков aTmpl © 1276 0 адаптивная галерея, responsive gallery