Hi nadeem1218,
I have created a sample by refering the below link which full-fill your requirement. You need to change the design as per your requirement.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/jcarousellite.js"></script>
<script type="text/javascript" src="js/captify.tiny.js"></script>
<script type="text/javascript">
$(function () {
$(".slider").jCarouselLite({ btnNext: ".next", btnPrev: ".prev", visible: 1 });
$('img.captify').captify({
// speed of the mouseover effect
speedOver: 'fast',
// speed of the mouseout effect
speedOut: 'normal',
// how long to delay the hiding of the caption after mouseout (ms)
hideDelay: 500,
// 'fade', 'slide', 'always-on'
animation: 'slide',
// text/html to be placed at the beginning of every caption
prefix: '',
// opacity of the caption on mouse over
opacity: '0.7',
// the name of the CSS class to apply to the caption box
className: 'caption-bottom',
// position of the caption (top or bottom)
position: 'bottom',
// caption span % of the image
spanWidth: '100%'
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="wrap">
<div id="list">
<div class="prev">
<img src="images/prev.jpg" alt="prev" /></div>
<div class="slider">
<ul>
<asp:Repeater ID="rptImages" runat="server">
<ItemTemplate>
<li>
<div style="float: left">
<table>
<tr>
<td colspan="2">
<b><span>
<%# Eval("Price") %></span></b>
</td>
</tr>
<tr>
<td>
Category
</td>
<td>
<%# Eval("Category")%>
</td>
</tr>
<tr>
<td>
Stone Type
</td>
<td>
<%# Eval("StoneType")%>
</td>
</tr>
<tr>
<td>
Carat
</td>
<td>
<%# Eval("Carat")%>
</td>
</tr>
<tr>
<td>
Model Number
</td>
<td>
<%# Eval("ModelNumber")%>
</td>
</tr>
<tr>
<td>
Net Weight
</td>
<td>
<%# Eval("NetWeight")%>
</td>
</tr>
</table>
</div>
<div style="height: 168px; margin-left: 250px">
<img src='<%# Eval("ImageUrl") %>' alt='<%# Eval("ImageUrl") %>' style="height: 168px;" /></div>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
<div class="next">
<img src="images/next.jpg" alt="next" /></div>
</div>
</div>
</form>
</body>
</html>
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[7] { new DataColumn("Price"),
new DataColumn("Category"),new DataColumn("StoneType"),new DataColumn("Carat"),
new DataColumn("ModelNumber"),new DataColumn("NetWeight"),new DataColumn("ImageUrl")});
dt.Rows.Add("13,350 SR", "Yellow Dia", "Diamond", "3.05", "P84276YD", "9.09", "images/1.jpg");
dt.Rows.Add("12,350 SR", "Red Dia", "Gold", "3.15", "P14276YD", "9.19", "images/2.jpg");
dt.Rows.Add("11,350 SR", "Green Dia", "Gold", "3.25", "P24276YD", "9.29", "images/3.jpg");
dt.Rows.Add("10,350 SR", "Orange Dia", "Silver", "3.35", "P34276YD", "9.39", "images/4.jpg");
dt.Rows.Add("9,150 SR", "Blue Dia", "Diamond", "3.45", "P44276YD", "9.49", "images/5.jpg");
dt.Rows.Add("8,250 SR", "Yellow Dia", "Gold", "3.55", "P54276YD", "9.59", "images/6.jpg");
dt.Rows.Add("7,350 SR", "Purple Dia", "Silver", "3.65", "P64276YD", "9.69", "images/7.jpg");
rptImages.DataSource = dt;
rptImages.DataBind();
}
}
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
If Not IsPostBack Then
Dim dt As New DataTable()
dt.Columns.AddRange(New DataColumn(6) {New DataColumn("Price"),
New DataColumn("Category"), New DataColumn("StoneType"),
New DataColumn("Carat"), New DataColumn("ModelNumber"),
New DataColumn("NetWeight"), New DataColumn("ImageUrl")})
dt.Rows.Add("13,350 SR", "Yellow Dia", "Diamond", "3.05", "P84276YD", "9.09", "images/1.jpg")
dt.Rows.Add("12,350 SR", "Red Dia", "Gold", "3.15", "P14276YD", "9.19", "images/2.jpg")
dt.Rows.Add("11,350 SR", "Green Dia", "Gold", "3.25", "P24276YD", "9.29", "images/3.jpg")
dt.Rows.Add("10,350 SR", "Orange Dia", "Silver", "3.35", "P34276YD", "9.39", "images/4.jpg")
dt.Rows.Add("9,150 SR", "Blue Dia", "Diamond", "3.45", "P44276YD", "9.49", "images/5.jpg")
dt.Rows.Add("8,250 SR", "Yellow Dia", "Gold", "3.55", "P54276YD", "9.59", "images/6.jpg")
dt.Rows.Add("7,350 SR", "Purple Dia", "Silver", "3.65", "P64276YD", "9.69", "images/7.jpg")
rptImages.DataSource = dt
rptImages.DataBind()
End If
End Sub
style.css
*
{
border: none;
margin: 0;
padding: 0;
}
body
{
font-family: Arial;
font-size: 10pt;
}
table
{
border: 1px solid #ccc;
}
table th
{
background-color: #F7F7F7;
color: #333;
font-weight: bold;
}
table th, table td
{
padding: 5px;
border-color: #ccc;
}
a:link
{
color: #0054a6;
text-decoration: none;
}
h1
{
font-size: 20px;
margin-bottom: 20px;
}
#wrap
{
margin: 10px auto;
width: 900px;
}
/************************************************
JCAROUSEL LITE
************************************************/
#list
{
height: 130px;
width: 700px;
margin: 30px auto;
}
.slider
{
float: left;
left: -5000px;
margin: 15px;
position: relative;
visibility: hidden;
}
.slider ul
{
height: 100px;
width: 600px;
}
.slider ul li
{
padding: 0 20px;
}
.slider ul li img
{
cursor: pointer;
height: 100px;
padding-top: 3px;
width: 300px;
}
.prev
{
cursor: pointer;
float: left;
padding-top: 60px;
}
.next
{
cursor: pointer;
float: right;
padding-top: 60px;
}
/************************************************
CAPTIFY CAPTION
************************************************/
.caption-top, .caption-bottom
{
background: #000000;
color: #ffffff;
cursor: default;
padding: 2px;
font-size: 11px;
text-align: center;
}
.caption-top
{
border-width: 0px;
}
.caption-bottom
{
border-width: 0px;
}
.caption a, .caption a
{
background: #000;
border: none;
text-decoration: none;
padding: 2px;
}
.caption a:hover, .caption a:hover
{
background: #202020;
}
jcarousellite.js
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(6($){$.1g.1w=6(o){o=$.1f({r:n,x:n,N:n,17:q,J:n,L:1a,16:n,y:q,u:12,H:3,B:0,k:1,K:n,I:n},o||{});8 G.R(6(){p b=q,A=o.y?"15":"w",P=o.y?"t":"s";p c=$(G),9=$("9",c),E=$("10",9),W=E.Y(),v=o.H;7(o.u){9.1h(E.D(W-v-1+1).V()).1d(E.D(0,v).V());o.B+=v}p f=$("10",9),l=f.Y(),4=o.B;c.5("1c","H");f.5({U:"T",1b:o.y?"S":"w"});9.5({19:"0",18:"0",Q:"13","1v-1s-1r":"S","z-14":"1"});c.5({U:"T",Q:"13","z-14":"2",w:"1q"});p g=o.y?t(f):s(f);p h=g*l;p j=g*v;f.5({s:f.s(),t:f.t()});9.5(P,h+"C").5(A,-(4*g));c.5(P,j+"C");7(o.r)$(o.r).O(6(){8 m(4-o.k)});7(o.x)$(o.x).O(6(){8 m(4+o.k)});7(o.N)$.R(o.N,6(i,a){$(a).O(6(){8 m(o.u?o.H+i:i)})});7(o.17&&c.11)c.11(6(e,d){8 d>0?m(4-o.k):m(4+o.k)});7(o.J)1p(6(){m(4+o.k)},o.J+o.L);6 M(){8 f.D(4).D(0,v)};6 m(a){7(!b){7(o.K)o.K.Z(G,M());7(o.u){7(a<=o.B-v-1){9.5(A,-((l-(v*2))*g)+"C");4=a==o.B-v-1?l-(v*2)-1:l-(v*2)-o.k}F 7(a>=l-v+1){9.5(A,-((v)*g)+"C");4=a==l-v+1?v+1:v+o.k}F 4=a}F{7(a<0||a>l-v)8;F 4=a}b=12;9.1o(A=="w"?{w:-(4*g)}:{15:-(4*g)},o.L,o.16,6(){7(o.I)o.I.Z(G,M());b=q});7(!o.u){$(o.r+","+o.x).1n("X");$((4-o.k<0&&o.r)||(4+o.k>l-v&&o.x)||[]).1m("X")}}8 q}})};6 5(a,b){8 1l($.5(a[0],b))||0};6 s(a){8 a[0].1k+5(a,\'1j\')+5(a,\'1i\')};6 t(a){8 a[0].1t+5(a,\'1u\')+5(a,\'1e\')}})(1x);',62,96,'||||curr|css|function|if|return|ul|||||||||||scroll|itemLength|go|null||var|false|btnPrev|width|height|circular||left|btnNext|vertical||animCss|start|px|slice|tLi|else|this|visible|afterEnd|auto|beforeStart|speed|vis|btnGo|click|sizeCss|position|each|none|hidden|overflow|clone|tl|disabled|size|call|li|mousewheel|true|relative|index|top|easing|mouseWheel|padding|margin|200|float|visibility|append|marginBottom|extend|fn|prepend|marginRight|marginLeft|offsetWidth|parseInt|addClass|removeClass|animate|setInterval|0px|type|style|offsetHeight|marginTop|list|jCarouselLite|jQuery'.split('|'),0,{}))
captify.tiny.js
jQuery.fn.extend({captify:function(a){var a=$.extend({speedOver:"fast",speedOut:"normal",hideDelay:500,animation:"slide",prefix:"",opacity:"0.35",className:"caption-bottom",position:"bottom",spanWidth:"100%"},a);$(this).each(function(){var b=this;$(this).load(function(){$this=b;if(this.hasInit){return false}this.hasInit=true;var d=false;var m=false;var g=$("#"+$(this).attr("rel"));var f=!g.length?$(this).attr("alt"):g.html();g.remove();var h=this.parent&&this.parent.tagName=="a"?this.parent:$(this);var c=h.wrap("<div></div>").parent();c.css({overflow:"hidden",padding:0,fontSize:0.1});c.addClass("caption-wrapper");c.width($(this).width());c.height($(this).height());$.map(["top","right","bottom","left"],function(p){c.css("margin-"+p,$(b).css("margin-"+p));$.map(["style","width","color"],function(q){var r="border-"+p+"-"+q;c.css(r,$(b).css(r))})});$(b).css({border:"0 none"});var o=$("div:last",c.append("<div></div>")).addClass(a.className);var l=$("div:last",c.append("<div></div>")).addClass(a.className).append(a.prefix).append(f);$("*",c).css({margin:0}).show();var j=jQuery.browser.msie?"static":"relative";o.css({zIndex:1,position:j,opacity:a.animation=="fade"?0:a.opacity,width:a.spanWidth});if(a.position=="bottom"){var k=parseInt(o.css("border-top-width").replace("px",""))+parseInt(l.css("padding-top").replace("px",""))-1;l.css("paddingTop",k)}l.css({position:j,zIndex:2,background:"none",border:"0 none",opacity:a.animation=="fade"?0:1,width:a.spanWidth});o.width(l.outerWidth());o.height(l.height());var n=(a.position=="bottom"&&jQuery.browser.msie)?-4:0;var i=(a.position=="top")?{hide:-$(b).height()-o.outerHeight()-1,show:-$(b).height()}:{hide:0,show:-o.outerHeight()+n};l.css("marginTop",-o.outerHeight());o.css("marginTop",i[a.animation=="fade"||a.animation=="always-on"?"show":"hide"]);var e=function(){if(!d&&!m){var p=a.animation=="fade"?{opacity:0}:{marginTop:i.hide};o.animate(p,a.speedOut);if(a.animation=="fade"){l.animate({opacity:0},a.speedOver)}}};if(a.animation!="always-on"){$(this).hover(function(){m=true;if(!d){var p=a.animation=="fade"?{opacity:a.opacity}:{marginTop:i.show};o.animate(p,a.speedOver);if(a.animation=="fade"){l.animate({opacity:1},a.speedOver/2)}}},function(){m=false;window.setTimeout(e,a.hideDelay)});$("div",c).hover(function(){d=true},function(){d=false;window.setTimeout(e,a.hideDelay)})}});if(this.complete||this.naturalWidth>0){$(b).trigger("load")}})}});
Screenshot
