aisensiy/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup,
  menu, nav, section { display: block; }
</style>
</head>
<body>
  <a id="example4" title="Lorem ipsum dolor sit amet" href="http://farm3.static.flickr.com/2680/4305925199_dee66e6c4b.jpg">
      <img alt="example4" src="http://farm3.static.flickr.com/2680/4305925199_dee66e6c4b_m.jpg">
  </a>

  <a id="example5" title="Cras neque mi, semper at interdum id, dapibus in leo. Suspendisse nunc leo, eleifend sit amet iaculis et, cursus sed turpis." href="http://farm3.static.flickr.com/2775/4110967360_661cd9d99e.jpg">
      <img alt="example5" src="http://farm3.static.flickr.com/2775/4110967360_661cd9d99e_m.jpg">
  </a>

  <a id="example6" title="Sed vel sapien vel sem tempus placerat eu ut tortor. Nulla facilisi. Sed adipiscing, turpis ut cursus molestie, sem eros viverra mauris, quis sollicitudin sapien enim nec est. ras pulvinar placerat diam eu consectetur." href="http://farm3.static.flickr.com/2779/4262915740_c631846165.jpg">
      <img alt="example6" src="http://farm3.static.flickr.com/2779/4262915740_c631846165_m.jpg">
  </a>
  <!--
  <div id="image-mask"></div>
  <div id="image-box" class="show">
    <img src="http://farm3.static.flickr.com/2779/4262915740_c631846165.jpg" />
  </div>
-->
</body>
</html>

## script.js
/**
 * @param {object} elem where add br
 * @param {number} num br number
 */
function addBr(elem, num) {
  for(var i=0; i<num; i++) {
    var br = document.createElement('br');
    elem.appendChild(br);
  }
}

(function() {
  function fmt(tmpl, params) {
    return tmpl.replace(/#\{([^\}]+)\}/g, function(g, g0) {
      return params[g0] || '';
    });
  }

  function addClass(elem, name) {
    elem.className = elem.className + ' ' + name;
  }

  function removeClass(elem, name) {
    var pattern = new RegExp('\\b' + name + '\\b', 'gi');
    elem.className = elem.className.replace(pattern, '').replace(/ +/g, ' ');
  }

  function ImagePopupBox(selector) {
    var links = document.querySelectorAll(selector);
    this.links = [].slice.call(links, 0);
  }

  function getStyle( elem, name ) {
    if (elem.style[name])
      return elem.style[name];
    else if (document.defaultView && document.defaultView.getComputedStyle) {
      // It uses the traditional 'text-align' style of rule writing,
      // instead of textAlign
      name = name.replace(/([A-Z])/g,"-$1");
      name = name.toLowerCase();
      // Get the style object and get the value of the property (if it exists)
      var s = document.defaultView.getComputedStyle(elem, "");
      return s && s.getPropertyValue(name);
    } else {
      return null;
    }
  }

  ImagePopupBox.prototype = {
    contructor: ImagePopupBox,
    maskId: 'image-mask',
    imageId: 'image-box',
    _create_mask: function() {
      var wrapper = document.createElement('div');
      wrapper.innerHTML = fmt('<div id="#{id}"></div>', {id: this.maskId});
      this.mask = wrapper.lastChild;
      document.body.appendChild(this.mask);
    },
    _create_img: function() {
      var wrapper = document.createElement('div');
      wrapper.innerHTML = fmt('<div id="#{id}"><img /></div>', {id: this.imageId});
      this.box = wrapper.lastChild;
      this.img = this.box.getElementsByTagName('img')[0];
      document.body.appendChild(this.box);
      var self = this;
      this.img.addEventListener('load', function(event) {
        self._reset_position(this.width, this.height);
      });

      this.mask.addEventListener('click', function() {
        self.hide();
      });
      this.box.addEventListener('click', function() {
        self.hide();
      });

    },
    _reset_position: function(width, height) {
      this.box.style.left = (window.innerWidth - width) / 2 + 'px';
      this.box.style.top = (window.innerHeight - height) / 2 + 'px';
    },
    hide: function() {
      removeClass(this.box, 'active');
      removeClass(this.mask, 'active');
    },
    show: function() {
      this.img.src = '';
      addClass(this.box, 'active');
      addClass(this.mask, 'active');
    },
    init: function() {
      var self = this;
      self._create_mask();
      self._create_img();
      self._reset_position(20, 20);
      this.links.forEach(function(elem, index) {
        elem.addEventListener('click', function(event) {
          event.preventDefault();
          var maxWidth = parseInt(getStyle(elem, 'maxWidth'), 10);
          if(maxWidth && elem.width < parseInt(getStyle(elem, 'maxWidth'), 10)) return;
          self.show();
          self.img.src = this.src;
          return false;
        });
      });
    }
  };

  new ImagePopupBox('img').init();

})();

addBr(document.body, 10);

## style.css
img[alt] {
  max-width: 200px;
}

#image-box {
  position: fixed;
  background-color: white;
  padding: 10px;
  visibility: hidden;
  margin: auto;
}

#image-mask {
  left: 0;
  top: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: black;
  visibility: hidden;
}

#image-box, #image-mask {
  opacity: 0;
  -webkit-transition:
    opacity 0.3s 0,
    visibility 0 0.3s;
}

#image-box.active,
#image-mask.active {
  visibility: visible;
  -webkit-transition-delay: 0;
}

#image-box.active {
  opacity: 1;
}

#image-mask.active {
  opacity: 0.3;
}

#image-box>img {
  z-index: 10;
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	<!--[if IE]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<style>
	article, aside, figure, footer, header, hgroup,
	menu, nav, section { display: block; }
	</style>
	</head>
	<body>
	<a id="example4" title="Lorem ipsum dolor sit amet" href="http://farm3.static.flickr.com/2680/4305925199_dee66e6c4b.jpg">
	<img alt="example4" src="http://farm3.static.flickr.com/2680/4305925199_dee66e6c4b_m.jpg">
	</a>

	<a id="example5" title="Cras neque mi, semper at interdum id, dapibus in leo. Suspendisse nunc leo, eleifend sit amet iaculis et, cursus sed turpis." href="http://farm3.static.flickr.com/2775/4110967360_661cd9d99e.jpg">
	<img alt="example5" src="http://farm3.static.flickr.com/2775/4110967360_661cd9d99e_m.jpg">
	</a>

	<a id="example6" title="Sed vel sapien vel sem tempus placerat eu ut tortor. Nulla facilisi. Sed adipiscing, turpis ut cursus molestie, sem eros viverra mauris, quis sollicitudin sapien enim nec est. ras pulvinar placerat diam eu consectetur." href="http://farm3.static.flickr.com/2779/4262915740_c631846165.jpg">
	<img alt="example6" src="http://farm3.static.flickr.com/2779/4262915740_c631846165_m.jpg">
	</a>
	<!--
	<div id="image-mask"></div>
	<div id="image-box" class="show">
	<img src="http://farm3.static.flickr.com/2779/4262915740_c631846165.jpg" />
	</div>
	-->
	</body>
	</html>
	/**
	* @param {object} elem where add br
	* @param {number} num br number
	*/
	function addBr(elem, num) {
	for(var i=0; i<num; i++) {
	var br = document.createElement('br');
	elem.appendChild(br);
	}
	}

	(function() {
	function fmt(tmpl, params) {
	return tmpl.replace(/#\{([^\}]+)\}/g, function(g, g0) {
	return params[g0] \|\| '';
	});
	}

	function addClass(elem, name) {
	elem.className = elem.className + ' ' + name;
	}

	function removeClass(elem, name) {
	var pattern = new RegExp('\\b' + name + '\\b', 'gi');
	elem.className = elem.className.replace(pattern, '').replace(/ +/g, ' ');
	}

	function ImagePopupBox(selector) {
	var links = document.querySelectorAll(selector);
	this.links = [].slice.call(links, 0);
	}

	function getStyle( elem, name ) {
	if (elem.style[name])
	return elem.style[name];
	else if (document.defaultView && document.defaultView.getComputedStyle) {
	// It uses the traditional 'text-align' style of rule writing,
	// instead of textAlign
	name = name.replace(/([A-Z])/g,"-$1");
	name = name.toLowerCase();
	// Get the style object and get the value of the property (if it exists)
	var s = document.defaultView.getComputedStyle(elem, "");
	return s && s.getPropertyValue(name);
	} else {
	return null;
	}
	}

	ImagePopupBox.prototype = {
	contructor: ImagePopupBox,
	maskId: 'image-mask',
	imageId: 'image-box',
	_create_mask: function() {
	var wrapper = document.createElement('div');
	wrapper.innerHTML = fmt('<div id="#{id}"></div>', {id: this.maskId});
	this.mask = wrapper.lastChild;
	document.body.appendChild(this.mask);
	},
	_create_img: function() {
	var wrapper = document.createElement('div');
	wrapper.innerHTML = fmt('<div id="#{id}"><img /></div>', {id: this.imageId});
	this.box = wrapper.lastChild;
	this.img = this.box.getElementsByTagName('img')[0];
	document.body.appendChild(this.box);
	var self = this;
	this.img.addEventListener('load', function(event) {
	self._reset_position(this.width, this.height);
	});

	this.mask.addEventListener('click', function() {
	self.hide();
	});
	this.box.addEventListener('click', function() {
	self.hide();
	});

	},
	_reset_position: function(width, height) {
	this.box.style.left = (window.innerWidth - width) / 2 + 'px';
	this.box.style.top = (window.innerHeight - height) / 2 + 'px';
	},
	hide: function() {
	removeClass(this.box, 'active');
	removeClass(this.mask, 'active');
	},
	show: function() {
	this.img.src = '';
	addClass(this.box, 'active');
	addClass(this.mask, 'active');
	},
	init: function() {
	var self = this;
	self._create_mask();
	self._create_img();
	self._reset_position(20, 20);
	this.links.forEach(function(elem, index) {
	elem.addEventListener('click', function(event) {
	event.preventDefault();
	var maxWidth = parseInt(getStyle(elem, 'maxWidth'), 10);
	if(maxWidth && elem.width < parseInt(getStyle(elem, 'maxWidth'), 10)) return;
	self.show();
	self.img.src = this.src;
	return false;
	});
	});
	}
	};

	new ImagePopupBox('img').init();

	})();

	addBr(document.body, 10);
	img[alt] {
	max-width: 200px;
	}

	#image-box {
	position: fixed;
	background-color: white;
	padding: 10px;
	visibility: hidden;
	margin: auto;
	}

	#image-mask {
	left: 0;
	top: 0;
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: black;
	visibility: hidden;
	}

	#image-box, #image-mask {
	opacity: 0;
	-webkit-transition:
	opacity 0.3s 0,
	visibility 0 0.3s;
	}

	#image-box.active,
	#image-mask.active {
	visibility: visible;
	-webkit-transition-delay: 0;
	}

	#image-box.active {
	opacity: 1;
	}

	#image-mask.active {
	opacity: 0.3;
	}

	#image-box>img {
	z-index: 10;
	}