Skitter slider terkeren part 2

E Yow Hello Semua Mister [N] Sister kemarin aq abis jalan-jalan nih dari Sini dan nemu slider ini beuh slider yang kali ini lebih edan lagi Dari Quake Slider yang aku pernah posting sebelumnya slider kali ini bisa di gunakan dalam Mode HTML Dan juga XML tapi yang kita bahas sekarang menggunakan HTML karena aku belum pernah liat kita di blogger menulis kode memakai XML kecuali pihak bloggernya sendiri intinya banyak yang sepesial di slider ini huft dan posting ini juga bakal panjang untuk menjelaskan semuanya ok mari langsung.

1. Simpan script di bawah ini di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script src='http://sites.google.com/site/zyztem33/js/skitter.min.js'></script>
<script src='http://sites.google.com/site/zyztem33/js/jquery.animate-colors-min.js'></script>
<script src='http://sites.google.com/site/zyztem33/js/jquery.easing.1.3.js'></script>
<script type='text/javascript'>
 $(function(){
 $('.box_skitter_large').skitter({
 animation : 'random', // Animasi berjalan secara Acak
 controls  : true, // Tombol Kontrol play pause
 controls_position : 'rightBottom', // Posisi Tombol Kontrol play pause
 numbers_align  : 'right', // Posisi nomor urut slider
 hideTools  : true, // Saat kursor meninggalkan area slider maka tombol - tombolnya akan bersembunyi
 focus   : true, // Menampilkan Tombol fokus
 progressbar  : true, // Efek animasi warna memanjang sebagai tanda waktu slider berjalan
 enable_navigation_keys: true // Slidernya juga bisa di gerakan dengan tombol arah panah komputer
});
});
</script>

Jika kode Jquery yang bergaris bawah tersebut sudah ada dalam template maka jangan anda copy lagi cukup kode yang di bawahnya saja.

2. Masukan kode css di bawah ini di atas kode ]]></b:skin>

.box_skitter_large {
  margin: 0 auto;
  padding: 0;
}
.box_skitter {
  position:relative;
  width:800px;
  height:300px;
  background:#090909;
  border: 5px solid #8F8C55
}

.box_skitter img {
  max-width:none;
}

.box_skitter ul {
  display:none;
}

.box_skitter .container_skitter {
  overflow:hidden;
  position:relative;
}

.box_skitter .image {
  overflow:hidden;
}

.box_skitter .image img {
  display:none;
}

.box_skitter .box_clone {
  position:absolute;
  top:0;
  left:0;
  width:100px;
  overflow:hidden;
  display:none;
  z-index:20;
}

.box_skitter .box_clone img {
  position:absolute;
  top:0;
  left:0;
  z-index:20;
}

.box_skitter .prev_button {
  position:absolute;
  top:50%;
  left:35px;
  z-index:100;
  width:42px;
  height:42px;
  overflow:hidden;
  text-indent:-9999em;
  margin-top:-25px;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMFBiNAJ6QMiQ7WscKEGxdKzy48kTJOU_OfJ8jyYwyikV3iR69TJH19eJZPVwdXaSiLoQvVWToXp6268AG9v6xYQW408_Ato4FDcInAIcw4AVTMXSb_zDA-rd8SM_bpghcOlZpbK5gYmM/s400/prev.png) no-repeat left top;
}

.box_skitter .next_button {
  position:absolute;
  top:50%;
  right:35px;
  z-index:100;
  width:42px;
  height:42px;
  overflow:hidden;
  text-indent:-9999em;
  margin-top:-25px;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjW6exgEKUnpaOV8IZtxcSTdDJ8WDIezXybZeAZkszYnj3wP8EWPt6qtKLLJTkvi4BzyLdzz6JuK9M1bzurWU9JIsjl5Bdf78iA7DT3cxMOp-Af7Sd-Y68g9aYu1yNq6mLZ3M8OjwSklz0/s400/next.png) no-repeat left top;
}

.box_skitter .info_slide {
  position:absolute;
  top:15px;
  left:15px;
  z-index:100;
  background: #000;
  color:#fff;
  font:bold 11px arial;
  padding:5px 0 5px 5px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  opacity:0.75;
}

.box_skitter .info_slide .image_number {
  background:#333;
  float:left;
  padding:2px 10px;
  margin:0 5px 0 0;
  cursor:pointer;
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  border-radius:2px;
}

.box_skitter .info_slide .image_number_select {
  background:#cc0000;
  float:left;
  padding:2px 10px;
  margin:0 5px 0 0;
}

.box_skitter .container_thumbs {
  position:relative;
  overflow:hidden;
  height:50px;
}

.box_skitter .info_slide_thumb {
  height:50px;
  -moz-border-radius:0;
  -webkit-border-radius:0;
  border-radius:0;
  overflow:hidden;
  top:auto;
  top:0;
  left:0;
  padding:0 !important;
  opacity:1.0;
}

.box_skitter .info_slide_thumb .image_number {
  overflow:hidden;
  width:100px;
  height:50px;
  position:relative;
  margin:0 !important;
  padding:0 !important;
  -moz-border-radius:0 !important;
  -webkit-border-radius:0 !important;
  border-radius:0 !important;
}

.box_skitter .info_slide_thumb .image_number img {
  position:absolute;
  top:-30px;
  left:-30px;
  height:100px;
}

.box_skitter .box_scroll_thumbs {
  padding:0;
}

.box_skitter .box_scroll_thumbs .scroll_thumbs {
  position:absolute;
  bottom:60px;
  left:50px;
  background:#ccc;
  background:-moz-linear-gradient(-90deg,#555,#fff);
  background:-webkit-gradient(linear,left top,left bottom,from(#555),to(#fff));
  width:200px;
  height:10px;
  overflow:hidden;
  text-indent:-9999em;
  z-index:101;
  cursor:pointer;
  border:0 solid #333;
}

.box_skitter .info_slide_dots {
  position:absolute;
  bottom:-40px;
  z-index:151;
  padding:5px 0 5px 5px;
  -moz-border-radius:50px;
  -webkit-border-radius:50px;
  border-radius:50px;
}

.box_skitter .info_slide_dots .image_number {
  background:#333;
  float:left;
  margin:0 5px 0 0;
  cursor:pointer;
  -moz-border-radius:50px;
  -webkit-border-radius:50px;
  border-radius:50px;
  width:18px;
  height:18px;
  text-indent:-9999em;
  overflow:hidden;
}

.box_skitter .info_slide_dots .image_number_select {
  background:#cc0000;
  float:left;
  margin:0 5px 0 0;
}

.loading {
  position:absolute;
  top:50%;
  right:50%;
  z-index:10000;
  margin:-16px -16px;
  color:#fff;
  text-indent:-9999em;
  overflow:hidden;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj1_uuAREyN0f2kYnQ4jc4pVH-sO5AXV6TqrjA67ePbaeVcu_nBg3WHm743vYShO7KgVrBL_7fEGLgUbXH_Fd9rJ0COLQxDBhJuci10O8K7M5vCKPKTfOz_g3eI8Ay44SOX4X9cspdDKPbj/s400/loadingQ.gif) no-repeat left top;
  width:48px;
  height:41px;
}

.box_skitter .label_skitter {
  z-index:150;
  position:absolute;
  bottom:0;
  left:0;
  display:none;
}

.box_skitter .label_skitter {
  z-index:150;
  position:absolute;
  bottom:0;
  left:0;
  color:#fff;
  display:none;
  opacity:0.8;
  background:#000;
}

.box_skitter .label_skitter p {
  padding:5px 10px;
  margin:0;
  font:normal 13px/20px Arial,tahoma;
  letter-spacing:0;
  text-align: left
}
.box_skitter .label_skitter p a, .box_skitter .label_skitter p a:visited {
  color: #09f;
  text-decoration: underline
}
.box_skitter .info_slide* {
  font-family:Consolas,arial,tahoma !important;
}

.box_skitter .progressbar {
  background: #CA9D0E;
  position:absolute;
  top:5px;
  left:15px;
  height:5px;
  width:200px;
  z-index:99;
  border-radius:20px;
}

.box_skitter .preview_slide {
  display:none;
  position:absolute;
  z-index:152;
  bottom:30px;
  left:-40px;
  width:100px;
  height:100px;
  background:#fff;
  border:1px solid #222;
  -moz-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;
  -webkit-box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;
  box-shadow:rgba(0,0,0,0.7) 2px 2px 5px;
  overflow:hidden;
}

.box_skitter .preview_slide ul {
  height:100px;
  overflow:hidden;
  margin:0;
  list-style:none;
  display:block;
  position:absolute;
  top:0;
  left:0;
}

.box_skitter .preview_slide ul li {
  width:100px;
  height:100px;
  overflow:hidden;
  float:left;
  margin:0;
  padding:0;
  position:relative;
  display:block;
}

.box_skitter .preview_slide ul li img {
  position:absolute;
  top:0;
  left:0;
  height:150px;
  width:auto;
}

#overlay_skitter {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  z-index:9998;
  opacity:1;
  background:#000;
}

.box_skitter .focus_button {
  position:absolute;
  top:50%;
  z-index:100;
  width:42px;
  height:42px;
  overflow:hidden;
  text-indent:-9999em;
  margin-top:-25px;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHKPTFLOX3DEONXqWtMByq2zsYzu71QK8MUtYTI7INch2MRIpvTBwmPagZ9BpxP6keD4pE7Bba9BVci6DUb7wgkmvyNyRMNecguOXdfA_H8F_11KHWPeDI3Y9MFpoCsU0W2MekD9TA9b4/s400/focus-button.png) no-repeat left top;
  opacity:0;
}

.box_skitter .play_pause_button {
  position:absolute;
  top:50%;
  z-index:151;
  width:42px;
  height:42px;
  overflow:hidden;
  text-indent:-9999em;
  margin-top:-25px;
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrvXJcx8KejSnPrGWIB9i8SrF55vMSn3p5pvg4TjY581C52lAvuz7rvTWCA_C6bhfvX6NlHeZU_s06XuQgjrSCrw0g9Gi3PLT-ijF8FZbjR53PMv8aSWXUwOci7qhMdjfGIOr_GEQIBoU/s400/pause-button.png) no-repeat left top;
  opacity:0;
}

.box_skitter .play_pause_button.play_button {
  background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjquATeMTWF5ojStkmi52rLJfOmJ-QkcdCH4-8GooCsAtATC6-4aSHVfbbS2u9qGOuV_dP0LI9XCgJpGXMr5CLKY8OSDsBWcEHuMir_VF_l99VDCnEvbEwE6jc32FQsC8CqIvI5wKbgmbI/s400/play-button.png) no-repeat left top;
}

3. Masukan kode HTML di bawah ini dalam Gadget HTML/Javascript

<div class="box_skitter box_skitter_large">
<ul>

<li>
<a href="URL Anda"><img src="URL Gambar.jpg" /></a>
<div class="label_text">
<p>Disini tulis deskripsi dari gambar anda</p>
</div>
</li>
<li>
<a href="URL Anda"><img src="URL Gambar.jpg" /></a>
<div class="label_text">
<p>Disini tulis deskripsi dari gambar anda</p>
</div>
</li>
<li>
<a href="URL Anda"><img src="URL Gambar.jpg" /></a>
<div class="label_text">
<p>Disini tulis deskripsi dari gambar anda</p>
</div>
</li>

</ul><!--Penutup kode ul -->
</div><!--Penutup kode .box_skitter -->

Jika inign menambah slider gambarnya silahkan tambahkan kode seperti ini sebelum Penutup kode ul

<li>
<a href="URL Anda"><img src="URL Gambar.jpg" /></a>
<div class="label_text">
<p>Disini tulis deskripsi dari gambar anda</p>
</div>
</li>

Option - option Skitter Slider

Option	Description	Default
velocity	Velocity of animation	1
interval	Interval between transitions	2500
animation	Default animation	null or defined in <a> class
numbers	Nomor urut navigasi	true
navigation	Navigasi Arah panah kiri kanan	true
label	Deskripsi gambar	true
easing_default	Easing default	null
animateNumberOut	Warna Number / dots ( tak disentuh kursor )	{backgroundColor:'#333', color:'#fff'}
animateNumberOver	Warna Number / dots ( disentuh kursor )	{backgroundColor:'#000', color:'#fff'}
animateNumberActive	Warna Number / dots ( Saat Aktif )	{backgroundColor:'#cc3333', color:'#fff'}
thumbs	Navigasi sebagai thumbnail	false
hideTools	Menyembunyikan navigasi	false
fullscreen	Fullscreen mode	false
xml	Loading data from XML file	false
dots	Navigasi sebagai dots ( bundar )	false
width_label	Menentukan Lebar deskripsi	null
show_randomly	Randomly sliders	false
onLoad	Callback	null
numbers_align	Posisi dari navigasi number/dots/thumnail	left
preview	Tumbnail Saat Navigasi Dots di sentuh	false
focus	Tombol Fokus	false
focus_position	Posisi dari Tombol Fokus	center
controls	Tombol play/pause	false
controls_position	Positi dari Tombol play/pause	center

Contoh animateNumberOut, animateNumberOver, animateNumberActive

animateNumberOver: {
backgroundColor:'#09f', color:'#FFF'
},
animateNumberOut: {
backgroundColor:'#000', color:'#FFF'
},
animateNumberActive: {
backgroundColor:'#d00', color:'#FFF'
}

Fungsi Option animateNumberOut, animateNumberOver, animateNumberActive ini adalah untuk mengganti warna latar dari Navigasi baik tampilan sebagai Dots maupun Number.

Nama Efek - Efek Skitter Slider

1. all
2. cube
3. cubeRandom
4. block
5. cubeStop
6. cubeHide
7. cubeSize
8. horizontal
9. showBars
10. showBarsRandom
11. tube
12. fade
13. fadeFour
14. paralell
15. blind
16. blindHeight
17. blindWidth
18. directionTop
19. directionBottom
20. directionRight
21. directionLeft
22. cubeStopRandom
23. cubeSpread
24. cubeJelly
25. glassCube
26. glassBlock
27. circles
28. circlesInside
29. circlesRotate
30. cubeShownew
31. upBarsnew
32. downBarsnew
33. random
34. randomSmart

Jika anda ingin menggunakan salah satu atau beberapa animasi saja maka gunakan
with_animations : ['nama efek'] pada Attribut pemanggilnya dan hapus kode
animation : 'random', Jadi contohnya seperti ini.

<script type='text/javascript'>
 $(function(){
 $('.box_skitter_large').skitter({
 with_animations : ['upBarsnew','downBarsnew'],
 controls  : true,
 controls_position : 'rightBottom',
 numbers_align  : 'right',
 hideTools  : true,
 focus   : true,
 progressbar  : true,
 enable_navigation_keys: true
});
});
</script>

1. Perhatikan lagi kode numbers_align : 'right', itu adalah posisi dari Nomor navigasi atau Dots navigasi pilihannya itu ada 3:

1. left
2. center
3. right

2. Kode controls_position : 'rightBottom', adalah posisi dari button play / pause pilihannya ada 5:

1. leftTop
2. center
3. rightTop
4. rightBottom
5. leftBottom

Dan untuk kode yang lain yang nilainya true yang artinya benar / tampil dan jika anda tidak ingin tampilkan anda tinggal ganti nilai true dengan false, Dan jika anda ingin menambah option pada kode jquery pemanggilnya anda tinggal tulis nama option nya lalu pada option anda tinggal tambahkan tanda koma contoh seperti ini.

<script type='text/javascript'>
 $(function(){
 $('.box_skitter_large').skitter({
 with_animations : ['upBarsnew','downBarsnew'],
 controls  : true,
 controls_position : 'rightBottom',
 numbers_align  : 'right',
 hideTools  : true,
 focus   : true,
 progressbar  : true,
 enable_navigation_keys: true,
 fullscreen : false
});
});
</script>

Begitu seterusnya jika anda ingin menambah Option maka pada option kedua dari bawah harus di beri tanda koma dan untuk Option yang bernilai true dan false tidak apa-apa jika tidak di beri tanda quote namun selain nilai true dan false harus di beri tanda quote contohnya 'rightBottom' itukan bukan true dan false maka harus di beri tanda quote. nah di bawah ini sudah saya siapkan demonya mulai dari:

1. Standar
2. Menggunakan Dots
3. Menggunakan Thumbs

With Number
With Dots
With Thumbs

Sekianlah kalau tetep gak mengerti dengan penjelasan saya silahkan langsung saja mampir ke webnya Disini