Javascript 
Galleries & SlideShow Slide Photo jQuery
Galleries & SlideShow Slide Photo jQuery Galleries & SlideShow Slide Photo jQuery Hi, in this article you have a Slide Photo jQuery with a very cool transition effect. Every image have a short description when mouse is over the image, also you have back and forword buttons!
<script type="text/javascript" src="js/slide.1.2.1.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<body>
<div id="wrapper">
<div id="examples_outer">
<div id="slider_container_2">
<div id="SliderName_2" class="SliderName_2">
<img src="img/1.jpg" width="700" height="450" alt="Demo2 first" title="Demo2 first" usemap="#img1map" />
<map name="img1map">
<area href="#img1map-area1" shape="rect" coords="100,100,200,200" />
<area href="#img1map-area2" shape="rect" coords="300,100,400,200" />
</map>
<div class="SliderName_2Description">Lorem Ipsum passage,: <strong>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary</strong></div>
<img src="img/2.jpg" width="700" height="450" alt="Demo2 second" title="Demo2 second" />
<div class="SliderName_2Description">Lorem Ipsum passage,: <strong>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary</strong></div>
<img src="img/3.jpg" width="700" height="450" alt="Demo2 third" title="Demo2 third" />
<div class="SliderName_2Description">Lorem Ipsum passage,: <strong>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary</strong></div>
<img src="img/4.jpg" width="700" height="450" alt="Demo2 fourth" title="Demo2 fourth" />
<div class="SliderName_2Description">Lorem Ipsum passage,: <strong>All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary</strong></div>
</div>
<div class="c"></div>
<div id="SliderNameNavigation_2"></div>
<div class="c"></div>
<script type="text/javascript">
effectsDemo2 = 'rain,stairs,fade';
var demoSlider_2 = Sliderman.slider({container: 'SliderName_2', width: 700, height: 450, effects: effectsDemo2,
display: {
autoplay: 3000,
loading: {background: '#000000', opacity: 0.5, image: 'img/loading.gif'},
buttons: {hide: true, opacity: 1, prev: {className: 'SliderNamePrev_2', label: ''}, next: {className: 'SliderNameNext_2', label: ''}},
description: {hide: true, background: '#000000', opacity: 0.4, height: 50, position: 'bottom'},
navigation: {container: 'SliderNameNavigation_2', label: '<img src="img/clear.gif" />'}
}
});
</script>
<div class="c"></div>
</div>
<div class="c"></div>
</div>
<div class="c"></div>
</div>
</body>
* { margin: 0; outline: none; }
body { background-color: #444444; }
.c { clear: both; }
#wrapper { margin: 0 auto; padding: 0 40px 60px 40px; width: 960px; }
#slider_container_2 { float: left; margin: 0 0 0 -15px; padding: 15px; width: 700px; background: url(../img/bg.png) no-repeat 0 0; }
.SliderName_2 {
float: left;
width: 700px;
height: 450px;
overflow: hidden;
}
.SliderNamePrev_2 {
background: url(../img/left.png) no-repeat left center;
width: 50px;
height: 450px;
display: block;
position: absolute;
top: 0;
left: 0;
text-decoration: none;
}
.SliderNameNext_2 {
background: url(../img/right.png) no-repeat right center;
width: 50px;
height: 450px;
display: block;
position: absolute;
top: 0;
right: 0;
text-decoration: none;
}
.SliderName_2Description {
padding: 10px;
font-family: Tahoma,Arial,Helvetica;
font-size: 14px;
line-height: 30px;
letter-spacing: 1px;
text-align: center;
color: #ffffff;
text-shadow: 0 1px 3px #000000;
}
#SliderNameNavigation_2 { margin: 0; padding: 10px 0 0 0; height: 16px; text-align: center; overflow-y: hidden; }
#SliderNameNavigation_2 a:link, #SliderNameNavigation_2 a:active, #SliderNameNavigation_2 a:visited, #SliderNameNavigation_2 a:hover{
margin: 0;
padding: 0;
font-size: 0;
line-height: 0;
text-decoration: none;
}
#SliderNameNavigation_2 a img
{
border: none;
width: 16px;
height: 16px;
background: url(../img/bullet.png) no-repeat center center;
}
#SliderNameNavigation_2 a.active img
{
background: url(../img/bullet_active.png) no-repeat center center;
}
