jCarousel bisa di gunakan pada banyak hal. salah satunya adalah foto gallery. menggunakan sedikit tempat untuk memasang banyak gambar atau content.
Dengan menggunakan jQuery yang cenderung lebih ringan dari pada javascript yang lainnya, menjadikan jCarousel lebih multi fungsi.
Silahkan lihat demo jCarousel pada link berikut :
Cara Membuat jCarousel Dengan jQuery adalah sebagai berikut :
- Silahkan login keBlogger dengan account anda.
- Pergi Ke "Tata Letak" kemudian "Edit HTML".
- Gunakan jQuery versi 1.4.2, copy paste code berikut dan letakkan di <head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
- Copy paste code berikut dan letakkan dibawah code diatas :
<script src='http://hapiajavascript.googlecode.com/files/jquery.jcarousel.min.js' type='text/javascript'/>
<script>
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
</script>
<script>
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel();
});
</script>
- copy code CSS berikut dan pastekan diatas ]]></b:skin> :
.jcarousel-skin-tango .jcarousel-container {
-moz-border-radius: 10px;
background: #f0f0f0;
border: 1px solid #333;
}
.jcarousel-skin-tango .jcarousel-container-horizontal {
width: 245px;
padding: 20px 40px;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
width: 245px;
height: 75px;
}
.jcarousel-skin-tango .jcarousel-item {
width: 75px;
height: 75px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right: 10px;
}
.jcarousel-skin-tango .jcarousel-item-placeholder {
background: #fff;
color: #000;
}
/**
* Horizontal Buttons
*/
.jcarousel-skin-tango .jcarousel-next-horizontal {
position: absolute;
top: 43px;
right: 5px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpmhsmBBDjYOWbCpyslhqedI7B9tFU5OtciK6G9-LtIRGGpdXjXDSvVc24mXYlqQLi7PtvI8EU11Vu_TjJT4qLlIHMNORnQGcCiza6BPbdww5EJaDU2wEaa-2qp2YtpfNeZldtylBT5iU/s1600/next-horizontal.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
background-position: -32px 0;
}
.jcarousel-skin-tango .jcarousel-next-horizontal:active {
background-position: -64px 0;
}
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
position: absolute;
top: 43px;
left: 5px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg51IeAhbF-fi1wtKF6wFuO7qhhi2cvqQhgQHU87eNfR-yfb24VJq8xFa92DIg_hI3f2pvq8450pqht1YS-u5KjmFkv8LhNe-GTItiT3Swtz3h4e4udZKWd9WfjhIqyNM_cM2Shr6BMqk0/s1600/prev-horizontal.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
background-position: -32px 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
background-position: -64px 0;
}
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}
-moz-border-radius: 10px;
background: #f0f0f0;
border: 1px solid #333;
}
.jcarousel-skin-tango .jcarousel-container-horizontal {
width: 245px;
padding: 20px 40px;
}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
width: 245px;
height: 75px;
}
.jcarousel-skin-tango .jcarousel-item {
width: 75px;
height: 75px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right: 10px;
}
.jcarousel-skin-tango .jcarousel-item-placeholder {
background: #fff;
color: #000;
}
/**
* Horizontal Buttons
*/
.jcarousel-skin-tango .jcarousel-next-horizontal {
position: absolute;
top: 43px;
right: 5px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpmhsmBBDjYOWbCpyslhqedI7B9tFU5OtciK6G9-LtIRGGpdXjXDSvVc24mXYlqQLi7PtvI8EU11Vu_TjJT4qLlIHMNORnQGcCiza6BPbdww5EJaDU2wEaa-2qp2YtpfNeZldtylBT5iU/s1600/next-horizontal.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-next-horizontal:hover {
background-position: -32px 0;
}
.jcarousel-skin-tango .jcarousel-next-horizontal:active {
background-position: -64px 0;
}
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-next-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal {
position: absolute;
top: 43px;
left: 5px;
width: 32px;
height: 32px;
cursor: pointer;
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg51IeAhbF-fi1wtKF6wFuO7qhhi2cvqQhgQHU87eNfR-yfb24VJq8xFa92DIg_hI3f2pvq8450pqht1YS-u5KjmFkv8LhNe-GTItiT3Swtz3h4e4udZKWd9WfjhIqyNM_cM2Shr6BMqk0/s1600/prev-horizontal.png) no-repeat 0 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:hover {
background-position: -32px 0;
}
.jcarousel-skin-tango .jcarousel-prev-horizontal:active {
background-position: -64px 0;
}
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:hover,
.jcarousel-skin-tango .jcarousel-prev-disabled-horizontal:active {
cursor: default;
background-position: -96px 0;
}
- Simpan Template.
- Letakkan code berikut di tempat yang anda inginkan :
<div class="jcarousel-skin-tango"><div class="jcarousel-container jcarousel-container-horizontal" style="position: relative; display: block;"><div class="jcarousel-clip jcarousel-clip-horizontal" style="overflow: hidden; position: relative;"><ul class="jcarousel-list jcarousel-list-horizontal" id="mycarousel" style="overflow: hidden; position: relative; top: 0px; left: 0px; margin: 0px; padding: 0px; width: 850px;"><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li><li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li></ul></div><div class="jcarousel-prev jcarousel-prev-horizontal jcarousel-prev-disabled jcarousel-prev-disabled-horizontal" style="display: block;" disabled="true"></div><div class="jcarousel-next jcarousel-next-horizontal" style="display: block;" disabled="false"></div></div></div>
# Pada code di atas ini disediakan 7 link gambar. silahkan anda tambah dengan perintah <li><img width="75" height="75" alt="" src="http://LINK-GAMBAR-ANDA.jpg"></li>.
# Lebar dan tinggi gambar pada tampilan adalah 75 pixel.
Untuk tutorial aslinya silahkan kunjungi http://sorgalla.com/projects/jcarousel/.
Selamat mencoba dan happy blogging.
jQuery lebih ringan dari pada javascript to sob? Baru tau aku...
Assalamuallikum Mas Hapia . . sy mau tny nih, kalau jCarousel dipasang, kira2 loading blog tambah berat ngga Mas . . . sy mau coba diblog sy mbo nanti mlh tambah berat . . ..
Wassalam
Damar- Blog Tips@ waalaikum salam
untuk nambah berat pa g nya itu lebih ke jumlah gambarnya. script atw jQuery itu ringan ketika hostingnya juga bagus. dan hosting yg saya gunakan adalah dari google.
wah !!! keren nih, sy coba dulu ya sob...
semakin mantap aja nih gan... salam blogger.
wah panjang banget ....
tapi makasih banyak ya infonya...
salam sobat
lebih ringan daripada javascript,, wah sip
saya ingin mencoba buat jcorousel dengan jquery mas.
makasih banyak infonya...
salam kenal....
salam aja sobat ^__^
jquery itu fungsinya buata apa ya?ingin tahu lebih jauh :)
ditempatkan di bawah header pasti ciamik ya :D
wah2 bisa dipertimbangkan nih :)
thanks sharingnya.
Wah kayanya jquery lagi banyak yg make ya Sob hhe......bisa dicoba nie nanti....makasih ilmu'y Sob........Sukse slalu.....
Kereenn Masss...!!!Keep Blogging
sahabat hapia mesir dah kembali bisa diakses nih, kangen rasanya
Lama gak berkunjung kesini, maaf!
Segera kucoba!
Tutorial yang ok!
dah lama saya tak maen kesini...
dah blognya makin keren aja sob...
bagus mas
tapi
di saya gak ada tempatnya :D
kayaknya sulit ni tuk buat kayak ginian.
Pernah nyoba, tapi scriptnya eror. ketemu tutorial ini patut dicoba .siapa tau g error
jurus meringankan loading ni.. makasih ya bung share nya
dengan tips ini blog yg banyak gambarnya bisa jadi ringan dunk..
"jQuery lebih ringan dari pada javascript?"..bukannya emang ajax.
kunjungan malam jumat sobat
Boleh di uji coba kawan, apa kabar nih lama gak keep in touch? thanks for sharing
makasih tips nya sob,..
ass ini share yang sangat bermanfaat. selain tampil lebih keren sepertinya scriptnya juga semakin ringan... syukron
tambah ilmu... terimakasih mas.. ^^
artikel "Cara Membuat jCarousel Dengan jQuery dari HAPIA Mesir ini solusi yang baik untuk temen blogger yang suka upload foto semacam gallerry.
syukron dah dishare
datang kembalimencai update terbaru daro hapia mesir yang sangat dibutuhkan oleh rekan blogger.. slm
Hmmm...., Mantab banget... Mas..
Nice info