nakome
11/30/2015 - 2:44 PM

Expand images

Expand images

body {
		padding: 1em;
}
/* Expand
_______________________*/

.img-full-container {
		position: fixed;
		z-index: 999997;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.8);
		padding: 10px;
		border-radius: 5px;
		text-align: center;
		display: none;
		cursor: pointer;
}

.img-full-container img {
		max-width: 100%;
		max-height: 100%;
		bottom: 0;
		left: 0;
		margin: auto;
		overflow: auto;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 999998;
}

.img-full-container .close {
		cursor: pointer;
		position: absolute;
		right: 0;
		bottom: 0;
		text-align: right;
		color: #fff;
		font-size: 12px;
		background-color: #1B1818;
		padding: 0.5em;
		width: 100%;
		z-index: 999999;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
/**
* Required jquery
* Html <img class="expand" src="image.png">
*/
(function($){
  $.each($('.expand'),function(i,obj){
  	$(obj).on('click',function(e){
  		e.preventDefault();
			var link = ($(obj).attr('src')) ? $(obj).attr('src') : $(obj).attr('href') ;
  		$('.img-full-container').fadeIn();
  		$('.img-full-container img').attr('src',link);
  	});
  });
  // close preview
  $('.img-full-container').on('click',function(e){
  	$('.img-full-container').fadeOut();
  	$('.img-full-container img').attr('src','');
  	var wait = setTimeout(function(){
  		$('.img-full-container').css('display','none');
  	},1000);
  });
})(jQuery);
<p><img width="150" class="expand" src="https://images.unsplash.com/photo-1447876394678-42a7efa1b6db?crop=entropy&fit=crop&fm=jpg&h=650&ixjsv=2.0.0&ixlib=rb-0.3.5&q=80&w=1375" alt="" /></p>


<p><img width="150" class="expand" src="https://images.unsplash.com/photo-1447522200268-a0378dac3fba?crop=entropy&fit=crop&fm=jpg&h=650&ixjsv=2.0.0&ixlib=rb-0.3.5&q=80&w=1375" alt="" /></p>


<p><a class="expand" href="https://images.unsplash.com/photo-1445964047600-cdbdb873673d?crop=entropy&fit=crop&fm=jpg&h=650&ixjsv=2.0.0&ixlib=rb-0.3.5&q=80&w=1375">
Expand this image link
</a></p>




<div class="img-full-container">
	<img src="">
	<div class="close">Click To Close</div>
</div>