Home jquery Skitter slider terkeren part 2

Sabtu, 30 Juni 2012

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(http://1.bp.blogspot.com/-KJHqckdf2uo/T-2k3jlzLkI/AAAAAAAACkw/u-lUaceZgYk/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(http://2.bp.blogspot.com/-KseY-FEigp4/T-2k3nM8WuI/AAAAAAAACk8/w0XAw5wSnXY/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(http://2.bp.blogspot.com/-Gv_aE8GtHd0/T-hiOWNaf9I/AAAAAAAACjM/yI9ZevW3AoM/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(http://3.bp.blogspot.com/-XyDMk3fms7I/T-2k33nklvI/AAAAAAAAClI/Wwx-X2kBiqA/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(http://1.bp.blogspot.com/-GvtZsT1nDk8/T-2k4AQNR2I/AAAAAAAAClU/G7HIAujYx5k/s400/pause-button.png) no-repeat left top;
  opacity:0;
}

.box_skitter .play_pause_button.play_button {
  background:url(http://2.bp.blogspot.com/--FEyTz_PsUk/T-2k4s3QkEI/AAAAAAAAClg/02dV0wTJ_ck/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

Skitter slider terkeren part 2 Skitter slider terkeren part 2 Sinto 5.0 stars based on 35 reviews 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 lag...

Related Posts

Next Post
Previous Post