Membuat Menu / Image Scrolling dengan jQuery

Just another way to show your image galery . hoahoahoahoa . Waktu bloging bnyk boger yg make slideshow buat nampilin image dan sebagainya, sekarang saya mau share cara nampilin image yg sedikit berbeda, tapi sama . lha ? gimana maksudnya ? coba lihat demonya disini,

Demo

yup begitulah bedanya, hahahaha langsung ajah cara buatnya, its very simple bro, sist .

1. masukin script jquerynya,

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

Nb: Kalo udah ada, tinggalin ajah .
2.Ini css nya..

div.sc_menu {
 position: relative;
 height: 145px;
 width: 500px;
 overflow: auto;
}
ul.sc_menu {
 display: block;
 height: 110px; 
 width: 1500px; 
 padding: 15px 0 0 15px; 
 margin: 0;
 background: #000;  
 list-style: none;
}
.sc_menu li {
 display: block;
 float: left; 
 padding: 0 4px;
}
.sc_menu a {
 display: block;
 text-decoration: none;
}
.sc_menu span {
 display: none;
 margin-top: 3px;
 
 text-align: center;
 font-size: 12px; 
 color: #fff;
}
.sc_menu a:hover span {
 display: block;
}
.sc_menu img {
 border: 3px #fff solid; 
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
.sc_menu a:hover img {
 filter:alpha(opacity=50); 
 opacity: 0.5;
}

Nb: bs dirubah sesuka hati kog . cocokin sama template gitu..

3. ini javascriptnya..

<script type= "text/javascript">/*<![CDATA[*/
$(function(){
 //Get our elements for faster access and set overlay width
 var div = $('div.sc_menu'),
  ul = $('ul.sc_menu'),
  ulPadding = 15;
 
 //Get menu width
 var divWidth = div.width();
 
 //Remove scrollbars 
 div.css({overflow: 'hidden'});
 
 //Find last image container
 var lastLi = ul.find('li:last-child');
 
 //When user move mouse over menu
 div.mousemove(function(e){
  //As images are loaded ul width increases,
  //so we recalculate it each time
  var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding; 
  var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;
  div.scrollLeft(left);
 });
});
/*]]>*/</script> 

Gag banyak2 amat kan sob.. hohohoho .

4. Yg terkahir bro. The HTML .

<div class="sc_menu"> 
 <ul class="sc_menu"> 
     <li><a href="#"><img src="img/1.jpg" alt="Menu"/><span>Menu</span></a></li> 
     <li><a href="#"><img src="img/2.jpg" alt="Navigation"/><span>Navigation</span></a></li> 
     <li><a href="#"><img src="img/3.jpg" alt="Javascript"/><span>jQuery</span></a></li> 
     <li><a href="#"><img src="img/4.jpg" alt="CSS"/><span>Scroll</span></a></li> 
     <li><a href="#"><img src="img/5.jpg" alt="Horizontal"/><span>Horizontal</span></a></li> 
     <li><a href="#"><img src="img/6.jpg" alt="jQuery"/><span>jQuery</span></a></li> 
     <li><a href="#"><img src="img/1.jpg" alt="Menu"/><span>Menu</span></a></li> 
     <li><a href="#"><img src="img/2.jpg" alt="Navigation"/><span>Navigation</span></a></li> 
     <li><a href="#"><img src="img/3.jpg" alt="Graceful"/><span>Graceful</span></a></li> 
     <li><a href="#"><img src="img/4.jpg" alt="Degradation"/><span>Degradation</span></a></li> 
     <li><a href="#"><img src="img/5.jpg" alt="Progressive"/><span>Progressive</span></a></li> 
     <li><a href="#"><img src="img/6.jpg" alt="Enhancement"/><span>Enhancement</span></a></li> 
 </ul> 
</div> 

nah jadi deh scrolling imagenya . bisa buat navigasi menu juga seperti judulnya . ato galery image . gimana sob ? gampang kan..