Image Viewer - Real Helper

md.shakil hossain

1381

Image Viewer

<div class="media">

  <a class="thumbnail">
    <img src=http://img3.wikia.nocookie.net/__cb20120618235731/penguinsofmadagascar/images/thumb/6/6b/MadagascarAlex.jpg/1000px-MadagascarAlex.jpg">
       </a>
   <a class="thumbnail">
    <img src="http://3boysandadog.com/wp-content/uploads/2012/12/King-Julien-and-Maurice.jpg">
   </a>
   <a class="thumbnail">
    <img src="http://img2.wikia.nocookie.net/__cb20140409215638/penguinsofmadagascar/images/thumb/f/f0/Marty-madagascar-23836394-400-300.jpg/1000px-Marty-madagascar-23836394-400-300.jpg">
   </a>
   <a class="thumbnail">
      <img src="http://rocketdock.com/images/screenshots/2_03_09_2006_madagascar-dreamworks-penguin5g.jpg">
   </a>
   <a class="thumbnail">
      <img src="http://img4.wikia.nocookie.net/__cb20120429161157/penguinsofmadagascar/images/thumb/b/b7/Madagascar-dreamworks-gloria4g.jpg/1000px-Madagascar-dreamworks-gloria4g.jpg">
  </a>
     <a class="thumbnail">
      <img src="http://spoileralertv.files.wordpress.com/2011/11/melman.jpg">
  </a>
</div>


<div class="thumb-viewer">
    <a class="prev"></a>
    <a class="next"></a>
    <a class="close">x</a>
  <div class="viewer-body"></div>
 </div>

<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

Try it Yourself >>

      *{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;}
body{background:#4CB648}

.media{text-align:center}

.thumbnail{
  width:250px;
  height:150px;
  border:1px solid #FF0;
  display:inline-block;
  overflow:hidden;
  margin:5px;
  cursor:zoom-in;
}
.thumbnail:hover img{opacity:0.7}
.thumbnail img{
  width:100%;
  height:auto;
}
.thumb-viewer{
  display:none;
}
.view-open{overflow:hidden;}
.view-open .thumb-viewer{
  display:block;
  background:rgba(0,0,0,0.7);
  position:fixed;
  left:0; right:0; top:0; bottom:0;  
}
.viewer-body{
  margin:auto;
  width:800px;
  position:absolute;
  height:600px;
  left:0; right:0; top:0; bottom:0;
  text-align:center;
}
.viewer-body img{
  width:auto;
  max-width:800px;
  height:600px;
}
.prev, .next{
  display:inline-block;
  width:35px;
  height:35px;
  border-top:5px solid #bbb;
  border-left:5px solid #bbb;
  transform:rotate(-45deg);
  -moz-transform:rotate(-45deg);
  -webkit-transform:rotate(-45deg);
  cursor:pointer;
  position: absolute;
  top:0;
  bottom:0;
  left:15px;
  margin:auto 15px;
  opacity:0.6;
  z-index:5;
}
.next{
  border:none;
  border-bottom:5px solid #bbb;
  border-right:5px solid #bbb;
  left:auto;
  right:15px;
}
.close{
  color:#fff;
  position: absolute;
  right:15px;
  top:5px;
  font-size:32px;
  font-family: Helvetica;
  font-weight:lighter;
  opacity:0.6;
  cursor:pointer;
}
.prev:hover, .next:hover, .close:hover{opacity:1;}

Try it Yourself >>

$(function() {
   var thumbnail =  $('.thumbnail');
   var container = $('.viewer-body');
   var close = $('.close');
   var next = $('.next');
   var prev = $('.prev');
  
   thumbnail.click(function(){
    var content = $(this).html();
    thumbnail.removeClass('open');
    $(this).addClass('open');
    $('body').addClass('view-open');
    container.html(content);
  });
    
  next.click(function() {
    var total = $('.media .thumbnail').length;
   if ($('.open').index() === total- 1){
       $('.thumbnail:last-child').addClass('open');
    }
  else{$('.open').removeClass('open').next().toggleClass('open');}
     var content = $('.open').html();
     container.html(content);
  });
  
  prev.click(function() {
    if ($('.open').index() == 0){$('.thumbnail:first-child').addClass('open');}
    else{ $('.open').removeClass('open').prev().toggleClass('open');}
     var content = $('.open').html();
     container.html(content);
  });
  
   close.click(function() {$('body').removeClass('view-open'); });  
  
});

Try it Yourself >>