Sepertinya Pemblokir Iklan Anda Aktif
Maaf, Sayangnya blog ini tidak bisa hidup tanpa bantuan dari iklan.
Mohon nonaktifkan terlebih dahulu Pemblokir iklan (misal: Adblock) khusus untuk blog ini.
Setelah Anda menonaktifkan AdBlock, silahkan reload halaman ini.
Terima Kasih, semoga anda selalu dimudahkan pada setiap usaha, serta semoga Tuhan menambah kualitas kesehatan anda sekeluarga.

Jabat tangan
FaRo.

Efek zoom pada gambar sangat bermanfaat, terutama jika website atau blog kita berisi foto, seperti toko online, blog fotografer, blog resep makanan dan lain - lain, kali ini faro akan membagikan cara memberi efek zoom menggunakan jQuery.

Contoh efek :
Contoh Zoom Image

Ada dua tahapan disini, pertama yaitu memasukkan javascript pada template anda dan kedua menyetel gambar yang akan dizoom di artikel anda.

Memasukkan Javascript ke dalam Template.
Efek ini mengunakan plugin jQuery bernama elevatezoom, jadi untuk menjalankannya dibutuhkan jQuery, script lengkap yang faro pakai di web ini adalah berikut ini :


Copy Paste Script diatas di template anda, taruh sebelum </body> (gunakan pencarian di template untuk mempermudah).

Mengatur Gambar yang akan di Zoom.
untuk mengaturnya, anda hanya perlu menambahkan kode :
data-zoom-image="url gambar besar" class="zoom_01"
pada script html image yang anda inginkan, sebagai contoh, pada gambar diatas, saya memasukkan gambar tersebut pada artikel dengan cara berikut :
<img alt="Contoh Zoom Image" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhROi0bFNfm6lxeVB-z2e7kU6Shkmxb16-uqyfeITWQQkyURxQBjgDCgTg20UvqafGkRPspKB6apNqjqwkETPvXKdartV5XV19-yq_kpYOIzvsFVAhiUJoUDrIWD1QOUTqIi_QoYvwgvw/s320/zoom.jpg" title="" width="320" class="zoom_05" data-zoom-image="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhROi0bFNfm6lxeVB-z2e7kU6Shkmxb16-uqyfeITWQQkyURxQBjgDCgTg20UvqafGkRPspKB6apNqjqwkETPvXKdartV5XV19-yq_kpYOIzvsFVAhiUJoUDrIWD1QOUTqIi_QoYvwgvw/s1600/zoom.jpg"/>
text berwarna ungu adalah sumber gambar kecil, text warna merah adalah sumber gambar besar, sedangkan text warna hijau adalah tipe zoom yang saya gunakan, dan text bergaris bawah adalah url gambar anda.

Tips : Jika Anda mengupload gambar langsung di artikel blogspot, anda hanya perlu mengganti text s320 atau s(angka) lainnya pada gambar kecil, (s320 disini berarti ukuran gambar 320px) menjadi s1600 atau lebih besar, seperti pada sumber gambar besar diatas. (s1600 berarti ukuran gambar 1600px). ini akan memudahkan anda dalam membat postingan.

berikut preview semua tipe zoom dengan ukuran gambar kecil 320px: (hover atau arahkan mouse ke gambar)
zoom_01 :
Contoh Zoom Image

zoom_02 :
Contoh Zoom Image

zoom_03 :
Contoh Zoom Image

zoom_04 :
Contoh Zoom Image

zoom_05 :
Contoh Zoom Image

zoom_06 :
Contoh Zoom Image

zoom_07 :
Contoh Zoom Image

zoom_mw : (mouse scroll untuk zoom)
Contoh Zoom Image

Semoga bermanfaat.

Tautan sumber : http://elevateweb.co.uk/

Post link : http://www.blognafaro.com/2013/11/cara-memberi-efek-zoom-pada-gambar-di-website.html

Cara Memberi Efek Zoom Pada Gambar di Artikel

Cara Memberi Efek Zoom Pada Gambar di Artikel
Ringkasan : Cara mudah dan praktis untuk memberi efek zoom pada gambar di website atau blog, kali ini faro berbagi cara cepat membuat efek zoom pada gambar di artikel. .
Jumlah Kata : | Dipublikasikan pada Friday, November 29, 2013

8 comments

AAAAHH!! :o
AKHIRNYA YANG KU CARI-CARI KETEMU JUGA =)) *nangis bahagia*
Terimakasih mas admin, udah share ilmu yang sangat bermanfaat gini, lengkap banget pula. :)
Semoga websitenya makin populer, dan rezeki mas adminnya dilancarkan amiin (p)
Sekali lagi terimakasih banyak yah mas :))

semoga rejeki n usaha mas juga lancar :)

Wah, tapi jelek menurut ane gan :3

untuk blogger memang kurang menarik gan, tapi untuk toko online dan semacamnya, ini sangat menarik :)

Kalau dalam bentuk slide formatnya bagaimana?

ko di saya tidak ada efeknya sama sekali gimana tuh solusinya

makasih bos infonya dan salam sukses

 
Top