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

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

{
"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 символов."
 }
 ]
}

<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';

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