Play Image (move and focus) with jQuery

Melihat sebuah gambar dengan resolusi cukup besar, ketika cursor diarahkan dapat movable, dan ketika di klik gambar akan focus dan terlihat jelas.

by Beben Koben

HTML

<h1>Tutorial Blog for Stylish Blogger</h1>
<div id="ejvariable" class="Zimage" style="box-shadow:1px 2px 3px #333;border-radius:10px;height:500px;width:312px;background-image:url(http://1.bp.blogspot.com/-2v72Z-RAxXk/T4jzGyAA8QI/AAAAAAAAA9c/efFdHc75y1M/s1600/beben-koben.jpg);"></div><br/><div style="text-align: center;"><span style="cursor:pointer" onclick="$('#ejvariable').css({'width':'300px','height':'200px'})">300x200</span> | <span style="cursor:pointer" onclick="$('#ejvariable').css({'width':'600px','height':'250px'})">600x250</span> | <span style="cursor:pointer" onclick="$('#ejvariable').css({'width':'500px','height':'500px'})">500x500</span> | <span style="cursor:pointer" onclick="$('#ejvariable').css({'width':'500px','height':'312px'})">500x312</span></div><br /><div class="Zimage" style="box-shadow:1px 2px 3px #333;border-radius:10px;width:500px;height:312px;background-image:url(http://3.bp.blogspot.com/-6znY0Ucm8So/T4j-XcKIrJI/AAAAAAAABBU/a_l3rwdGfQE/s1600/beben-koben.jpg);"></div>
      <p class="cred" align="center"> Creativity by <a href="http://ben-tools.blogspot.com/">Beben Koben</a></p>
<footer>
    <a class="orig" href="http://beben-koben.blogspot.com/2012/10/play-image-with-jquery-movable-and-focus.html" title="GO BACK TO ARTICLE"> &laquo; BACK TO</a>
    <h2><a href="http://beben-koben.blogspot.com/">BEBEN KOBEN</a></h2>
</footer>

CSS

*
{margin:0;padding:0;}
body
{background:#debe94;color:#000;font:15px Calibri, Arial, sans-serif;text-shadow:1px 1px 1px #FFFFFF;padding:10px;}
a,a:visited
{text-decoration:none;outline:none;color:#a00;}
a:hover
{color:#fff;}
footer
{background:#D3A76F;position:fixed;width:100%;border-top:1px solid #333;height:70px;bottom:0;left:0;color:#fff;text-shadow:1px 2px 0 #000;}
footer h2
{font:25px/26px Acens;font-weight:bold;left:70%;margin:0px 0 0 150px;padding:20px 0;position:relative;width:400px;}
footer a.orig,
a.orig:visited
{-moz-box-shadow:0px 0px 20px #000;-webkit-box-shadow:0px 0px 20px #000;box-shadow:0px 0px 20px #000;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;
    text-decoration:blink;
    font-weight:bold;
    color:#f00;
    font-size:14px;
    left:37%;
    line-height:46px;
    margin:12px 0 0 -405px;
    position:absolute;
    top:0;
    width:75px;
}
.cred {padding-top:15px;}
h1{text-align:center;text-shadow:3px 3px 5px #000;padding:5px 0 25px;font-family: Verdana, Geneva, sans-serif;font-size:20pt;color:#D3A76F;}
.Zimage {
background-color: transparent;
background-repeat: no-repeat;
background-position: 50% 50%; 
background-size: auto; 
margin: 0 auto;
position: relative;
cursor: move;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
-ms-transition: all 1s;
transition: all 1s;
}
.Zimage.covers { background-size: cover; }
.Zimage.covers div { display: none; }
.Zimage div {
height: 33%;
position: absolute;
width: 33%;
}
.c1 { left: 0; top: 0; }
.c2 { left: 33%; top: 0; }
.c3 { right: 0; top: 0; }
.c4 { left: 0; top: 33%; }
.c5 { left: 33%; top: 33%; }
.c6 { right: 0; top: 33%; }
.c7 { left: 0; bottom: 0; }
.c8 { left: 33%; bottom: 0; }
.c9 { right: 0; bottom: 0; }

JavaScript

$.fn.ejempol = function() { 
  $(this).each(function() {
      var html = "<div class='c1' rel='left top'></div><div class='c2' rel='50% top'></div><div class='c3' rel='right top'></div><div class='c4' rel='left 50%'></div><div class='c5' rel='50% 50%'></div><div class='c6' rel='right 50%'></div><div class='c7' rel='left bottom'></div><div class='c8' rel='50% bottom'></div><div class='c9' rel='right bottom'></div>";
      $(this).append(html);
      var $this = $(this);
      $this.click(function() {
         $(this).toggleClass('covers');
      });
      $this.children().each(function(){
        $(this).mouseover(function() {
          var pos = $(this).attr('rel');
          $this.css('background-position',pos);
        })
        $(this).mouseout(function() {
          $this.css('background-position','50% 50%');
        })
      });
    });
    return $(this); 
  }

  $(document).ready(function() {
    $('.Zimage').ejempol();
  })