◄ Min  Size Fonts: + | - | ± Color: Max ►

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/
Loading...
XPlay Image with jQuery (Movable and Focus)
Bermain sekitaran image dengan jQuery script. Ketika cursor didekatkan ke gambar bisa movable, ketika di klik akan focus gambar terlihat menyeluruh.
Subscribe my posts Register For Free!

5 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...


MISC

Resources

WANT BE HERE!!! CONTACT ME :P

FACEBOOK PAGE