Cara Menggunakan plugin jQuery Responsive Image Comparison
Halo berjumpa kembali dengan saya di tips dan trik Source Code Aplikasi, di kesempatan kali ini saya akan memberikan tips dan trik mengenai Cara Menggunakan plugin jQuery Responsive Image Comparison lagi – lagi saya ingin mengenalkan plugin jQery. Karena dengan menggunakan plugin kita dapat membuatnya dengan cepat dan gampang namun pun mesti tahu pun mendasar – mendasar bagi mempelajarinya disini saya tak akan mengajarkan kalian mengenai mendasar – mendasar jQuery melainkan hanya menggunakan plugin saja yang mana teman – teman dapat unduh yang sediakan dan kita belajar bagi memakainya. Dan kemudian setelah ini teman – teman dapat diimplementasikan di laman kalian masing – masing, selain itu pun hasilnya telah memiliki tampilan yang dinamis nah berikut gambarannya di bawah ini
Dari hasil layout gambar di atas ini kita dapat membukanya seperti kita membuka tirai, namun karena di komputer hanya ada mouse karenanya teman – teman tinggal klik dan tahan lalu teman – teman dapat geser ke atas ke bawah atau kekiri kekanan dan gambar ada 2 sisi. Di contoh ini saya membuatnya dengan horizonta dan vertikal selain itu jua gambar tampak memiliki tampilan yang dinamis
Bagus, sekarang ini kita implementasikan Cara Menggunakan plugin jQuery Responsive Image Comparison pertama-tama – tama unduh terlebih dahulu plugin yang saya telah siapkan, teman – teman dapat 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 Memiliki tampilan yang dinamis Image Comparison</title>
</head>
<body>
<div id=content class=wrap>
<h3>Horizontal Slider</h3>
<ul class=comparison horizontal>
<li><img src=people.png alt=Halo berjumpa kembali dengan saya di tips dan trik Cara Menggunakan plugin jQuery Memiliki tampilan yang dinamis Image Comparison></li>
<li><img src=grayscale.png alt=Halo berjumpa kembali dengan saya di tips dan trik Cara Menggunakan plugin jQuery Memiliki tampilan yang dinamis Image Comparison></li>
</ul>
<h3>Vertical Slider</h3>
<ul class=comparison vertical>
<li><img src=animals.png alt=Halo berjumpa kembali dengan saya di tips dan trik Cara Menggunakan plugin jQuery Memiliki tampilan yang dinamis Image Comparison></li>
<li><img src=sepia.png alt=Halo berjumpa kembali dengan saya di tips dan trik Cara Menggunakan plugin jQuery Memiliki tampilan yang dinamis Image Comparison></li>
</ul>
</div>
</body>
</html>
Bila telah save dengan nama index.html bagi image kalian sementara gunakan image apa saja boleh, berikutnya tambahkan css nya atau letakkan script css di bawah ini di pada 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; }}
Berikutnya kita panggil library dan juga plugin yang teman – teman telah unduh
Baru kita masukkan script jQuery nya bagi 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>
Bila telah save dan jalankan di browsernya, karenanya plugin berhasil di gunakan dan dapat di implementasikan di laman lainnya. Sehingga menghasilkan sebuah layout yang variatif bagi laman nya.
Bagus, lumayan sekianlah di artikel kali ini mengenai Cara Menggunakan plugin jQuery Responsive Image Comparison kita berjumpa kembali di tips dan trip yang akan datang. Kunjungi terus di laman ini bagi pengetahuan seputar dunia laman. Terima Kasih dan Hingga Jumpa.
Semoga bermanfaat 🙂
Sumber https://kursuswebsite.org
