Slider Menu Image

Sebelumnya saya sudah pernah membahas cara membuat slider menu ala zinmag-primus, kali ini saya akan coba berikan yang sedikit berbeda. Slider ini hanya menampilkan gambar saja tanpa dibubuhi keterangan atau diskripsi dari link atau gambar tersebut, namun saya rasa slider menu dengan image ini tampilannya lebih efektif ketimbang slider menu yang dulu pernah saya jelaskan. Sebagai contoh bisa sobat lihat pada contoh demo slide-nya disini.

 

Tampak gambar akan bergerak sendiri sesuai dengan delay atau waktu yang telah di setting pada kode javascript-nya. Untuk membuat cukup mudah, bagi yang suka yang bereksperimen dengan template-nya silahkan dicoba tutorialnya berikut ini.

 

• Silahkan download terlebih dahulu kode javascript-nya disini dan disini.
• Kemudian upload file js tersebut ke google sites atau google code.
• Setelah selesai upload, lihat url atau link dari file yang sudah di upload, seperti contoh link yang sudah saya upload bentuknya seperti ini :

  http://miscah.googlecode.com/files/jquery-1.3.1.min.js
  http://miscah.googlecode.com/files/jquery.scrollTo.js

• Sekarang bagian edit template, masuk ke Tata Letak –> Edit HTML.
• Tambahkan kode berikut ini setelah kode ]]></b:skin>

   

  <script src='http://miscah.googlecode.com/files/jquery-1.3.1.min.js' type='text/javascript'/>
  <script src='http://miscah.googlecode.com/files/jquery.scrollTo.js' type='text/javascript'/>

   

  <style type='text/css'>
  #slider {width:320px;height:200px;padding:5px;margin:0;position:relative;overflow:hidden}
  #slider a:link, #slider a:active {color:#FFF;text-decoration:none}
  #slider a:hover {color:#F00}
  #mask-gallery {overflow: hidden}
  #gallery {list-style:none;margin:0;padding:0;z-index 0;width:900px;overflow:hidden}
  #gallery li {float:left;padding:0px;margin:0px}
  #mask-excerpt {position:absolute;top:0;right:0;z-index:500px;overflow:hidden}

  </style>

  <script>
  $(document).ready(function() {
  var speed = 5000;

         $(&#39;#mask-gallery, #gallery li&#39;).width($(&#39;#slider&#39;).width());
         $(&#39;#gallery&#39;).width($(&#39;#slider&#39;).width() * $(&#39;#gallery li&#39;).length);
         $(&#39;#mask-gallery, #gallery li, #mask-excerpt, #excerpt li&#39;).height($(&#39;#slider&#39;).height());

         var run = setInterval(&#39;newsscoller(0)&#39;, speed);

         $(&#39;#gallery li:first, #excerpt li:first&#39;).addClass(&#39;selected&#39;);

         $(&#39;#btn-pause&#39;).click(function () {
                clearInterval(run);
                return false;
         });

         $(&#39;#btn-play&#39;).click(function () {
                run = setInterval(&#39;newsscoller(0)&#39;, speed);

                return false;
  });

         $(&#39;#btn-next&#39;).click(function () {
                newsscoller(0);
                return false;
         });

         $(&#39;#btn-prev&#39;).click(function () {
                newsscoller(1);
                return false;
  });

         $(&#39;#slider&#39;).hover(
                function() {
                       clearInterval(run);
  },
                function() {
                       run = setInterval(&#39;newsscoller(0)&#39;, speed);
                }
         );
  });

  function newsscoller(prev) {
         var current_image = $(&#39;#gallery li.selected&#39;).length ? $(&#39;#gallery li.selected&#39;) : $(&#39;#gallery li:first&#39;);
         var current_excerpt = $(&#39;#excerpt li.selected&#39;).length ? $(&#39;#excerpt li.selected&#39;) : $(&#39;#excerpt li:first&#39;);

         if (prev) {

                var next_image = (current_image.prev().length) ? current_image.prev() : $(&#39;#gallery li:last&#39;);

                var next_excerpt = (current_excerpt.prev().length) ? current_excerpt.prev() : $(&#39;#excerpt li:last&#39;);

                } else {
                       var next_image = (current_image.next().length) ? current_image.next() : $(&#39;#gallery li:first&#39;);
                       var next_excerpt = (current_excerpt.next().length) ? current_excerpt.next() : $(&#39;#excerpt li:first&#39;);
  }

         $(&#39;#excerpt li, #gallery li&#39;).removeClass(&#39;selected&#39;);
                next_image.addClass(&#39;selected&#39;);
                next_excerpt.addClass(&#39;selected&#39;);

                $(&#39;#mask-gallery&#39;).scrollTo(next_image, 800);
                $(&#39;#mask-excerpt&#39;).scrollTo(next_excerpt, 800);

  }
  </script>

• Simpan Template.

Keterngan :

1. Kode yang berwarna merah adalah kode js yang sudah sobat upload ke hosting google site atau google code, jika malas mengupload silahkan gunakan saja milik saya.
2. var speed = 5000 adalah kecepatan slide image-nya, semakin tinggi angkanya, maka akan semakin lambat.
3. Untuk width:320px dan height:200px masing-masing untuk lebar dan tinggi menu, sesuaikan dengan lebar sidebar sobat.

• Sekarang bagian memasang gambar slide-nya, masuk ke Elemen Halaman.
• Pilih Tambah Gadget –> pilih yang HTML/Javascript.
• Sekarang masukkan kode berikut :

  <div id="slider">
  <div id="mask-gallery">
  <ul id="gallery">

  <li><a href="http://miscah.blogspot.com/2010/03/roten-herzen-template.html"><img src="http://lh5.ggpht.com/_7Y9pl24WpQY/S5k7-LSv8kI/AAAAAAAADHo/9E8EpPU1mKI/image_thumb%5B2%5D.png" height="200px" width="320px" border="0" alt="Free Blogger Template" /></a></li>

  <li><a href="http://miscah.blogspot.com/2010/03/smart-gradient.html"><img src="http://lh6.ggpht.com/_7Y9pl24WpQY/S57X-OyXc5I/AAAAAAAADJ4/ukDMwgpRQDE/smart%20gradient_thumb%5B2%5D.png" height="200px" width="320px" border="0" alt="Free Blogger Template" /></a></li>

  <li><a href="http://miscah.blogspot.com/2010/02/blue-light-template.html"><img src="http://lh4.ggpht.com/_7Y9pl24WpQY/S3aqOXkcFgI/AAAAAAAAC9U/iAjS27QlZYU/image_thumb2.png" height="200px" width="320px" border="0" alt="Free Blogger Template" /></a></li>

  </ul>
  </div>
  </div>
  <div id="buttons">
  <a href="#" id="btn-prev">prev</a>
  <a href="#" id="btn-pause">pause</a>
  <a href="#" id="btn-next">next</a>
  <a href="#" id="btn-play">play</a>
  </div>
  

• Kemudian Simpan.

Keterangan :

1. Kode yang berwarna hijau adalah url yang akan di tuju.
2. Kode yang berwarna ungu adalah url dari gambar.

Selamat mencoba.