<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#slideshow {
border: 1px solid #D8D8D8;
height: 166px;
margin: 0 auto;
position: relative;
width: 220px;
}
element.style {
overflow: hidden;
}
#slideshow #slidesContainer {
height: 163px;
margin: 0 auto;
position: relative;
width: 210px;
}
#slideshow #slidesContainer .slide {
height: 166px;
margin: 0 auto;
width: 210px;
}
#rightControl {
background: url("../images/ph-rigtimg.png") no-repeat scroll 0 0 transparent;
right: -45px;
top: 41px;
width: 21px;
position:absolute;
}
.ph-txtprt {
height: 50px;
margin: 5px 0 10px;
overflow: hidden;
width: 220px;
}
#leftControl {
background: url("../images/ph-leftimg.png") no-repeat scroll 0 0 transparent;
left: -71px;
top: 41px;
width: 21px;
position:absolute;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var cp = 0;
var totalwidth = 210;
var gallery = $('.slide');
var title = $('.ph-txtprt');
var count = gallery.length;
$('#slidesContainer').css('overflow', 'hidden');
gallery.wrapAll('<div id="slideInner"></div>')
gallery.css({
'float' : 'left',
'width' : totalwidth
});
title.css({
'float' : 'left',
'width' : totalwidth
});
$('#slideInner').css('width', totalwidth * count);
$('#titleInner').css('width', totalwidth * count);
$('#slideshow')
.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
.append('<span class="control" id="rightControl">Clicking moves right</span>');
Controls(cp);
$('.control')
.bind('click', function(){
// Determine new position
cp = ($(this).attr('id')=='rightControl') ? cp+1 : cp-1;
Controls(cp);
$('#slideInner').animate({
'marginLeft' : totalwidth*(-cp)
});
$('#titleInner').animate({
'marginLeft' : totalwidth*(-cp)
});
});
function Controls(position){
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
if(position==count-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
}
});
</script>
</head>
<body>
<div id="slideshow">
<div id="slidesContainer">
<div class="slide">
<img src="1.jpg" width="210" height="156" alt="" />
</div>
<div class="slide">
<img src="2.jpg" width="210" height="156" alt="" />
</div>
<div class="slide">
<img src="3.jpg" width="210" height="156" alt="" />
</div>
</div>
<div style="width:220px;overflow:hidden;float:left; " >
<div id="titleInner" style="height:40px;">
<div class="ph-txtprt" style="width:210; text-align:center;">
<h4>Image1</h4>
</div>
<div class="ph-txtprt" style="width:210; text-align:center;">
<h4>Image2</h4>
</div>
<div class="ph-txtprt" style="width:210; text-align:center;">
<h4>Image3</h4>
</div>
</div></div>
</div>
</body>
</html>
Copy & paste save .. Put three images name as 1,2,3 run it .. Click here for
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#slideshow {
border: 1px solid #D8D8D8;
height: 166px;
margin: 0 auto;
position: relative;
width: 220px;
}
element.style {
overflow: hidden;
}
#slideshow #slidesContainer {
height: 163px;
margin: 0 auto;
position: relative;
width: 210px;
}
#slideshow #slidesContainer .slide {
height: 166px;
margin: 0 auto;
width: 210px;
}
#rightControl {
background: url("../images/ph-rigtimg.png") no-repeat scroll 0 0 transparent;
right: -45px;
top: 41px;
width: 21px;
position:absolute;
}
.ph-txtprt {
height: 50px;
margin: 5px 0 10px;
overflow: hidden;
width: 220px;
}
#leftControl {
background: url("../images/ph-leftimg.png") no-repeat scroll 0 0 transparent;
left: -71px;
top: 41px;
width: 21px;
position:absolute;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var cp = 0;
var totalwidth = 210;
var gallery = $('.slide');
var title = $('.ph-txtprt');
var count = gallery.length;
$('#slidesContainer').css('overflow', 'hidden');
gallery.wrapAll('<div id="slideInner"></div>')
gallery.css({
'float' : 'left',
'width' : totalwidth
});
title.css({
'float' : 'left',
'width' : totalwidth
});
$('#slideInner').css('width', totalwidth * count);
$('#titleInner').css('width', totalwidth * count);
$('#slideshow')
.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
.append('<span class="control" id="rightControl">Clicking moves right</span>');
Controls(cp);
$('.control')
.bind('click', function(){
// Determine new position
cp = ($(this).attr('id')=='rightControl') ? cp+1 : cp-1;
Controls(cp);
$('#slideInner').animate({
'marginLeft' : totalwidth*(-cp)
});
$('#titleInner').animate({
'marginLeft' : totalwidth*(-cp)
});
});
function Controls(position){
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
if(position==count-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
}
});
</script>
</head>
<body>
<div id="slideshow">
<div id="slidesContainer">
<div class="slide">
<img src="1.jpg" width="210" height="156" alt="" />
</div>
<div class="slide">
<img src="2.jpg" width="210" height="156" alt="" />
</div>
<div class="slide">
<img src="3.jpg" width="210" height="156" alt="" />
</div>
</div>
<div style="width:220px;overflow:hidden;float:left; " >
<div id="titleInner" style="height:40px;">
<div class="ph-txtprt" style="width:210; text-align:center;">
<h4>Image1</h4>
</div>
<div class="ph-txtprt" style="width:210; text-align:center;">
<h4>Image2</h4>
</div>
<div class="ph-txtprt" style="width:210; text-align:center;">
<h4>Image3</h4>
</div>
</div></div>
</div>
</body>
</html>
Copy & paste save .. Put three images name as 1,2,3 run it .. Click here for
