simple way to zoom images in a datalist (images are retrieved from the database)

Posted by Nithadeepak under jQuery category on | Points: 40 | Views : 9631
aspx page

<asp:DataList  ID="grdProducts" runat="server" CssClass="gridproducts" RepeatDirection="Horizontal" RepeatColumns="5">       
<ItemTemplate >
<div >
<div class="example">
<asp:Image Height="100" Width="100" ID="img1" class="imgzoom" runat="server" ImageUrl='<%#Eval("images","..\\images/{0}") %>' AlternateText='<%#DataBinder.Eval(Container.DataItem,"price")%>' /></div>


$(document).ready(function() {

$(".example").hover(function() {

marginTop: '0px',
marginLeft: '0px',
width: '125px', /* Set new width */
height: '125px', /* Set new height */
padding: '0px'
}, 500);

}, function() {
marginTop: '10px',
marginLeft: '15px',
width: '100px', /* Set width back to default */
height: '100px', /* Set height back to default */
padding: '0px'
}, 500);



width: 130px;
height: 130px;

width: 100px;
height: 100px;
margin:10px 0px 0px 15px;
background: #f0f0f0;
left: 0; top: 0;


Comments or Responses

Posted by: Chandrakanth on: 4/20/2012 Level:Starter | Status: [Member] | Points: 10
In Your Code What is the perpose of CssClass="gridproducts".
That why output shouldn't getting.

Login to post response