Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  
   <div id="images" align="center">
      <img src="http://i.imgur.com/miuh9.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/S0Z42.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/iu1a1.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/ocIme.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/ltboP.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/bO8Nm.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/miuh9.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/S0Z42.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/iu1a1.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/ocIme.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/ltboP.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/bO8Nm.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/miuh9.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/S0Z42.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/iu1a1.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/ocIme.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/ltboP.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/bO8Nm.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/miuh9.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/S0Z42.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/iu1a1.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/ocIme.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/ltboP.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/bO8Nm.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/miuh9.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/S0Z42.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/iu1a1.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/ocIme.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/ltboP.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/bO8Nm.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/miuh9.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/S0Z42.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/iu1a1.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/ocIme.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/ltboP.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/bO8Nm.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/miuh9.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/S0Z42.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/iu1a1.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/ocIme.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/ltboP.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/bO8Nm.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/miuh9.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/S0Z42.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/iu1a1.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/ocIme.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/ltboP.jpg" border="0" class="simplehover" width="140" height="105" />
      <img src="http://i.imgur.com/bO8Nm.jpg" border="0" class="simplehover" width="140" height="105" />     
   </div>  
  
  
</body>
</html>
​
 
        $('.simplehover').each(function(){
            var $this = $(this);
            
            // make sure that element is really an image
            if (! $this.is('img')) return false;
            
            var isrc = $this[0].src, dv = null;
                 
            if (! isrc) return false;          
          
            $this.mouseenter(function(e){
​
              dv = $('<div />')
                    .attr('class', '__shidivbox__')
                    .css({
                        'display': 'none',
                        'z-index' : 9999,
                        'position': 'absolute',
                        'box-shadow': '0 0 1em #000',
                        'border-radius' : '5px'
                    })
                    .html('<img alt="" src="' + isrc + '" />')
                    .appendTo(document.body);
              
                var DocuWidth = window.innerWidth;
                var DocuHeight = window.innerHeight;
              
                var DvImg = dv.find('img');
​
                var TheImage = new Image();
                TheImage.src = DvImg.attr("src");
            
                var DivWidth = TheImage.width;
                var DivHeight = TheImage.height;
              
              
                if (DivWidth > DocuWidth) {
     
                  var WidthFactor = (DivWidth / DocuWidth) + 0.05;
                  DivHeight = parseInt((DivHeight / WidthFactor), 10);
                  DivWidth = parseInt((DivWidth / WidthFactor), 10);
                }
              
                var ThumbHeight = $this.height();
                var ThumbWidth = $this.width();
                var ThumbTop = $this.position().top;
                var ThumbLeft = $this.position().left;
              
                var SpaceAboveThumb = ThumbTop - $(document).scrollTop();
                var SpaceBelowThumb = DocuHeight - ThumbTop - ThumbHeight + $(document).scrollTop();
              
                var MaxHeight = Math.max(SpaceAboveThumb, SpaceBelowThumb);
              
                if (DivHeight > MaxHeight) {
        
                  var HeightFactor = (DivHeight / MaxHeight) + 0.05;
                  DivHeight = parseInt((DivHeight / HeightFactor), 10);
                  DivWidth = parseInt((DivWidth / HeightFactor), 10);             
                }
​
                var HoverImgLeft = 0;
                var HoverImgTop = 0;
              
                if (SpaceBelowThumb > SpaceAboveThumb) {
                  HoverImgTop = ThumbTop + ThumbHeight;
                } else {
                  HoverImgTop = ThumbTop - DivHeight;
                }
              
                HoverImgTop = (HoverImgTop < 0) ? 0 : HoverImgTop;
                HoverImgLeft = (DocuWidth - DivWidth) / 2;
              
                dv.find('img').css({
                    'width': DivWidth,
                    'height': DivHeight,
                    'border-radius':'5px'
                  });
              
                dv.css({
                  'left': HoverImgLeft,
                  'top': HoverImgTop
                });
              
                dv.fadeIn('fast');
            });
              
            $this.mouseleave(function(){
                dv.fadeOut('fast');
            });         
​
        });
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers