Help me - Create horizontal slider like Window Mobile site

**tttt141** · 10-21-2008, 07:17 AM

This link : http://www.microsoft.com/windowsmobi...s/default.mspx
Look at the display slider products ( phones) , can you help me to find out the script for this , i tried to used their script but not work . Please help me , thank a lot

**bokanegro** · 10-21-2008, 07:35 AM

Hi.

Try this link:

Info: http://www.gsdesign.ro/blog/horizontal-image-menu/

Demo: http://www.phatfusion.net/imagemenu/index.htm

**rangana** · 10-21-2008, 08:06 AM

Might work with your desire:

HTML Code:

<script type="text/javascript" src="http://code.jquery.com/nightlies/jquery-nightly.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.desc').hide(); // Hide the description elements
$('#myul img').hover(function(){
	$(this).next().animate({width:'toggle'},'slow');},
	function(){
	$(this).next().animate({width:'toggle'},'slow');}
	)
});
</script>
<style type="text/css">
ul{list-style-type:none;}
#myul li{
float:left}
#myul li img{
width:200px;
height:150px;
float:left;
margin:1px;
}
#myul .desc{
background:#eee;
border:1px solid #222;
float:left;
margin:5px 10px;
height:120px;
padding:10px;
}
</style>
<ul id="myul">
<li><img src="http://rangana.moonylist.com/images/Picture7.jpg" alt="myimage">
<div class="desc">
This is a description
</div>
</li>
<li><img src="http://rangana.moonylist.com/images/Picture8.jpg" alt="myimage">
<div class="desc">
This is a description
</div>
</li>
<li><img src="http://rangana.moonylist.com/images/Picture9.jpg" alt="myimage">
<div class="desc">
This is a description
</div>
</li>
</ul>