You must enable Javascript in your browser to run or open this site.

Effect Zoom In Pada Gambar - Javascript

Halo para pembaca, Kembali kepada saya hehehe. Tiba tiba postingan ini nyempil nyempil egini diantara sesudah dan sebelum artikel lainnya, dikarnakan saya lupa untuk memposting Tutorial ini malah saya simpan menjadi Draft, hihi.

Oke saya disini kembali lagi untuk membagi bagikan sejumpah info mengenai Javascript yang berguna untuk media Zoommer (alias memperbesar). Tentu yang ingin diperbesar menurut Javascript kali ini adalah Gambar. Sebelumnya saya telah memperjelas masalah memperbesar gambar dengan menggunakan Css seperti pada Artikel saya satu ini → Effect Zoom Halus dengan Css.

Saya berikan contoh LIVE agar para pembaca bisa sekaligus mencoba keahlian dari pada Javascript Zoom ini :




Jadi, seperti gambar diatas Suatu gambar dapat terlihat jelas dengan Effect Zoomer tersebut dengan cara membuat ruangan lagi untuk di perjelas (Ruangan Zoomer). Bagaimanakah cara membuatnya? Yuk kita simak caranya dibawah ini :)

• Buka Blogger.com dan Login disana

• Buka Tab Desihn (Element Page). Sebelumnya sobat harus sudah siap dengan Gambar yang akan dipajangkan.

• Buat Gadget caranya Klik Add a Gadget → Javascript

• Masukan Kode berikut ke Kotak Kosong Javascript Blogger tersebut :

<style type="text/css">
.magnifyarea{
box-shadow: 3px 3px 5px #818181;
-webkit-box-shadow: 3px 3px 5px #818181;
-moz-box-shadow: 3px 3px 5px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=3, offY=3, positive=true);
background: white;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://sites.google.com/site/farixsantips/scripts/effectzoomer.js">
</script>
<script type="text/javascript">
jQuery(document).ready(function($){
$('#Img1').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300,300],
magnifierpos: 'right',
cursorshade: true,
largeimage: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi3A_lfyFzLHNxjGScnkaZalAG0w2jPZo5VjFmBTunMR4TPO9dvp-RMPDhQayvH9xTOCx7lzyKx9dtIjev5oHPMT4XtnoK__6jiykDB4Blph8Cmk3GiYIirCkze0Awowojarv2dXhwNzU/s400/Matrix+Farixsan.jpg'
})
})
</script>
<p><img id="img1" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi3A_lfyFzLHNxjGScnkaZalAG0w2jPZo5VjFmBTunMR4TPO9dvp-RMPDhQayvH9xTOCx7lzyKx9dtIjev5oHPMT4XtnoK__6jiykDB4Blph8Cmk3GiYIirCkze0Awowojarv2dXhwNzU/s400/Matrix+Farixsan.jpg" style="width:300px;height:225px" /><p>
Keterangan : Code largeimage: adalah Code dimana gambar asli telah diperbesar. Code Merah selanjutnya adalah kode gambar asli yang tak perlu menggunakan banyak Resolusi (tak perlu besar besar). Ubah gambar sesuai kebutuhan.

• Save.

Lihat hasilnya, jika ada sedikit kejanggalan atau masalah Tanyakan di kotak komentar, sekian :) Thanks for Reading.

17 comments

  1. wah, keren banget.. pas tak scroll di gambar, bisa membesar dan memperkecil..
    ajib banget..
    brarti tiap mau bikin gambar yang bisa di zoom, mesti nulis kode ini dulu??
    tak coba di postingan ah..

    BalasHapus
  2. ternyata nggak bisa diterapin pada gambar di postingan ya??

    BalasHapus
  3. To Faril : Sayangnya tidak bisa untuk Postingan sob, soalnya tidak support langsung javascript PLEEK gitu bukan, harus melalui kode Src=" gitu sob :l

    BalasHapus
  4. To Farixsan Quilicuor (Faris Hardiyanto 177) :kog di artikel ini,, kamu bisa bikin gambar yang menggunakan kode ini di postingan??gimana caranya tuh??
    *pengen bisa

    BalasHapus
  5. To Faril : Seperti yang aku katakan barusan, aku melalui cara src="" gitu.
    Contoh : <javascript src="LOKASI SCRIPT ZOOM" type="text/javascript"></script>. Jadi kode :
    jQuery(document).ready(function($){
    $('#Img1').addimagezoom({
    zoomrange: [3, 10],
    magnifiersize: [300,300],
    magnifierpos: 'right',
    cursorshade: true,
    largeimage: 'http://2.bp.blogspot.com/-8NkN8NQU5VA/TdzyerDFhyI/AAAAAAAABI4/CvKepOtI9dE/s400/Matrix%2BFarixsan.jpg'
    })
    })
    itu tadi dimasukin ke note pad dan dijadikan file.js
    Selengkapnya disini : HERE

    BalasHapus
  6. aaaaaaaaaaaaaaa......nggak mudeng..
    coba bikin artikel yang membahas kode javascript ini tapi khusus untuk postingan dong...makasih banyak...

    BalasHapus
  7. sudah dibuat postingannya sob, silahkan berkomen ria disana :D

    BalasHapus
  8. Mantap utnuk dipelajari...thanks informasinya :D

    BalasHapus
  9. Waduuuhhh nyerah.. ~x( dah di ubek2 supaya bisa di posting ga bisa2.. :((
    Kasih petunjuk untuk dok bro.. maklum newbe nich.. :D

    BalasHapus
  10. To Miftahudin : mau dipasang di postingan sob gambar zoomnya? sulit om caranya. kalau di gadget ikuti aja caranya diatas.

    BalasHapus
  11. kalo diposting diedit html bisa ngga bro?

    BalasHapus
  12. Mantap untuk dipelajari...thanks informasinya :D

    BalasHapus
  13. ternyata nggak bisa diterapin pada gambar di postingan ya??

    BalasHapus