Jika anda memiliki desain dan ingin menggunakan efek sebelum (before) dan sesudah (after) atau perbandingan gambar, script ini pasti akan sangat berguna bagi Anda.
Dalam tutorial ini kita akan belajar bagaimana menambahkan before/after Plugin, sebuah script yang bekerja dengan jQuery dan menampilkan dua gambar dinamis untuk membandingkan kedua gambar pada waktu yang sama. Dengan menyeret ke samping sebuah bar kecil kita dapat melihat kedua gambar yang dibandingkan.
Lihat contoh gambar foto dibawah ini
Menerapkan script ini sederhana, kita hanya perlu jQuery, Sebelum / Setelah skrip, dan dua gambar yang kita akan membandingkan.
Langkah 1. Masuk ke Template> Edit HTML dan sebelum kode </ head> (CTRL + F untuk menemukannya) paste script berikut
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/><script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js' type='text/javascript'/><script src='http://helplogger.googlecode.com/svn/trunk/jquery.beforeafter.min.js' type='text/javascript'/><script type='text/javascript'>$(function(){$('#beforeafter1').beforeAfter({showFullLinks : true});});</script>
Langkah 2. Klik pada tombol Template Simpan
Catatan: jika script di atas tidak bekerja, tambahkan di atas </ body> tag. Jika juga belum bisa Anda telah memiliki dua jQuery pada template Anda (jika demikian, maka hapus baris hijau)
Langkah 3. Pergi ke Layout, menambahkan HTML / Javascript gadget dan paste script ini di dalam kotak kosong:
<div id='beforeafter1'><div><img alt='before' src='URL of the first image' width='500' height='291'/></div><div><img alt='after' src='URL of the second image' width='500' height='291'/></div></div>
script diatas juga bekerja pada postingan (copy dan paste pada post HTML)
Tambahkan URL gambar pertama pada text warna biru, dan URL dari gambar kedua pada text warna merah. Penting juga untuk mengubah ukuran gambar pada text berwarna oranye. Jika gambar Anda lebih buatlah id ke 2 (text berwarna hijau)
Tambahkan URL gambar pertama pada text warna biru, dan URL dari gambar kedua pada text warna merah. Penting juga untuk mengubah ukuran gambar pada text berwarna oranye. Jika gambar Anda lebih buatlah id ke 2 (text berwarna hijau)
Semoga berhasil. Jika ada pertanyaan bisa langsung komentar, atau langsung ke sumbernya Terimakasih
Desainer Manado - Sulawesi Utara - Indonesia Design - Desain Kota Manado - Manado Design - Manado Desain - Grafik Desain Manado - Desain Grafik Manado - Designer Manado - Photo Prewedding Manado - Prewedding Manado - Prewedding Manado - Prewedding Sulawesi Utara - Wedding Manado - Manado Wedding - Album Wedding - Wedding Album - Album Prewedding Manado - Desainer Photographer Manado - Digital Imaging Manado - Karikatur Manado - Karikatur Indonesia - Digital Imaging Indonesia - Digital Art Manado - Desainer Grafis Manado - Manado Artist Digital - Belajar Desain Grafis Manado - Belajar Graphic Design Manado - Maskot Manado - Sekolah Grafis Manado - DKV Manado - Desain Komunikasi Visual Manado - Seminar Desain Grafis Manado - Desain Logo Manado - Logo Desain Manado - Logo Sulawesi Utara
