Play Image with jQuery (Movable and Focus)

Tidak ada bahan postingan, menyomot artikel orang deh :D Bermain dengan jQuery plugin sekitaran image. Sebuah gambar dengan resolusi cukup besar dapat dikecilkan dengan membubuhkan variabel width & height Agar terlihat lebih full stylish, dipadukan dengan jQuery script maka image dengan resolusi besar tadi walau sudah dibatasi dengan panjang & tinggi bisa terlihat ke sekitarnya! Lebih hebatnya ketika di klik akan focus gambar terlihat secara keseluruhan sesuai dengan pjg & lbr yg telah di tentukan.
Master @vagabundia tell about Jugando con jQuery y las imágenes de fondo Dengan posisi gambar yg sudah di patok atas-bawah kanan-kiri diberi bumbu script menjadi play image with jQuery (move and focus) :D

<script type='text/javascript'>
//<![CDATA[
  $.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();
  })
//]]>
</script>

KODE CSS

.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; }

MARKUP HTML<div class="Zimage" style="width:500px;height:312px;background-image:url(LINK-IMAGE-HERE);"></div>Gantikan link-image-here dengan link gambar.
Save. Lihat hasil kerja :)
Happy jQuery \m/