Halo berjumpa kembali dengan saya di tips dan trik Dumet School, pada kesempatan kali ini saya akan memberikan tips dan trik tentang Cara Menggunakan plugin jQuery Responsive Image Comparison lagi – lagi saya ingin mengenalkan plugin jQery. Karena dengan menggunakan plugin kita dapat membuatnya dengan cepat dan mudah namun juga harus tahu juga dasar – dasar untuk mempelajarinya disini saya tidak akan mengajarkan kalian tentang dasar – dasar jQuery melainkan hanya menggunakan plugin saja yang mana teman – teman bisa download yang sediakan dan kita belajar untuk memakainya. Dan kemudian setelah ini teman – teman bisa diimplementasikan di website kalian masing – masing, selain itu juga hasilnya sudah responsive nah berikut gambarannya di bawah ini
Dari hasil layout gambar di atas ini kita bisa membukanya seperti kita membuka tirai, namun karena di komputer hanya ada mouse maka teman – teman tinggal klik dan tahan lalu teman – teman bisa geser ke atas ke bawah atau kekiri kekanan dan gambar ada 2 sisi. Pada contoh ini saya membuatnya dengan horizonta dan vertikal selain itu jua gambar tampak responsive
Baik, sekarang kita implementasikan Cara Menggunakan plugin jQuery Responsive Image Comparison pertama – tama download terlebih dahulu plugin yang saya sudah siapkan, teman – teman bisa klik link ini. Kemudian siapkan text editornya dan copy script html nya di bawah ini
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Cara Menggunakan plugin jQuery Responsive Image Comparison</title> </head> <body> <div id="content" class="wrap"> <h3>Horizontal Slider</h3> <ul class="comparison horizontal"> <li><img src="people.png" alt="Before"></li> <li><img src="grayscale.png" alt="After"></li> </ul> <h3>Vertical Slider</h3> <ul class="comparison vertical"> <li><img src="animals.png" alt="Before"></li> <li><img src="sepia.png" alt="After"></li> </ul> </div> </body> </html>
Jika sudah save dengan nama index.html untuk image kalian sementara pakai image apa saja boleh, berikutnya tambahkan css nya atau letakkan script css di bawah ini di dalam tag <head>
html, body, p, li, h1, h2, h3 { margin: 0; padding: 0; }
a { text-decoration: none; }
pre { overflow: auto; }
html, body {color: #666; font: 16px/24px sans-serif;}
.wrap { margin: 150px auto; width: 1140px; }
#content { margin-top: 100px; }
#content h2 { color: #333; font: bold italic 24px serif; margin: 10px 0; }
#content h3 { margin: 10px 0; }
#content p { margin: 10px 0 20px 0; }
@media screen and (max-width: 1200px) {.wrap { width: 600px; }}
@media screen and (max-width: 768px) {.wrap { width: 400px; }}
@media screen and (max-width: 320px) {.wrap { padding: 0 5%; width: 90%; }#logo a { font-size: 24px; }}
Selanjutnya kita panggil library beserta plugin yang teman – teman sudah download
Baru kita masukkan script jQuery nya untuk memanggil fungsinya
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_setDomainName', 'jqueryscript.net']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
Jika sudah save dan jalankan pada browsernya, maka plugin berhasil di gunakan dan bisa di implementasikan pada website lainnya. Sehingga menghasilkan sebuah layout yang variatif untuk website nya.
Baik, cukup sekian pada artikel kali ini tentang Cara Menggunakan plugin jQuery Responsive Image Comparison kita berjumpa kembali di tips dan trip yang akan datang. Kunjungi terus di website ini untuk pengetahuan seputar dunia website. Terima Kasih dan Sampai Jumpa.
Semoga bermanfaat 🙂