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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Адаптивная галерея Json Data & Bootstrap - демо</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="/assets/css/bootstrap.css" rel="stylesheet" />
<link href="/design/galleries/2014/json-data/gallery-json-data.css" rel="stylesheet" />
<script src="/design/adaptive-slider/2014/juicy-slider/jquery-1.10.2.js"></script>
<script src="/assets/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="row text-center">
<h1>Адаптивная галерея Json Data & Bootstrap</h1>
<div class="col-md-12">
<section class="gallery"></section>
</div>
</div>
</div>
<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>
</body>
</html>