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 :
• Save.
Lihat hasilnya, jika ada sedikit kejanggalan atau masalah Tanyakan di kotak komentar, sekian :) Thanks for Reading.
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">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.
.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>
• Save.
Lihat hasilnya, jika ada sedikit kejanggalan atau masalah Tanyakan di kotak komentar, sekian :) Thanks for Reading.
wah, keren banget.. pas tak scroll di gambar, bisa membesar dan memperkecil..
BalasHapusajib banget..
brarti tiap mau bikin gambar yang bisa di zoom, mesti nulis kode ini dulu??
tak coba di postingan ah..
ternyata nggak bisa diterapin pada gambar di postingan ya??
BalasHapusTo Faril : Sayangnya tidak bisa untuk Postingan sob, soalnya tidak support langsung javascript PLEEK gitu bukan, harus melalui kode Src=" gitu sob :l
BalasHapusTo Farixsan Quilicuor (Faris Hardiyanto 177) :kog di artikel ini,, kamu bisa bikin gambar yang menggunakan kode ini di postingan??gimana caranya tuh??
BalasHapus*pengen bisa
To Faril : Seperti yang aku katakan barusan, aku melalui cara src="" gitu.
BalasHapusContoh : <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
aaaaaaaaaaaaaaa......nggak mudeng..
BalasHapuscoba bikin artikel yang membahas kode javascript ini tapi khusus untuk postingan dong...makasih banyak...
sudah dibuat postingannya sob, silahkan berkomen ria disana :D
BalasHapusMantap utnuk dipelajari...thanks informasinya :D
BalasHapusTo indofreeabis : Thanks sob untuk supportnya :D
BalasHapusWaduuuhhh nyerah.. ~x( dah di ubek2 supaya bisa di posting ga bisa2.. :((
BalasHapusKasih petunjuk untuk dok bro.. maklum newbe nich.. :D
To Miftahudin : mau dipasang di postingan sob gambar zoomnya? sulit om caranya. kalau di gadget ikuti aja caranya diatas.
BalasHapuskalo diposting diedit html bisa ngga bro?
BalasHapusmakasih banyak gan,,
BalasHapusMantap untuk dipelajari...thanks informasinya :D
BalasHapusternyata nggak bisa diterapin pada gambar di postingan ya??
BalasHapusmakasih infonya
BalasHapusEffect Zoom Halus dengan Css
BalasHapus