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

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

<asp:DataList  ID="grdProducts" runat="server" CssClass="gridproducts" RepeatDirection="Horizontal" RepeatColumns="5">       
<ItemTemplate >
<div >
<table>
<tr>
<td>
<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>
</td></tr>
</table>
</div>
</ItemTemplate>
</asp:DataList>


jquery.js

$(document).ready(function() {

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

$(this).find('.imgzoom').addClass("hover").stop().animate({
marginTop: '0px',
marginLeft: '0px',
width: '125px', /* Set new width */
height: '125px', /* Set new height */
padding: '0px'
}, 500);

}, function() {
$(this).find(".imgzoom").removeClass("hover").stop().animate({
marginTop: '10px',
marginLeft: '15px',
width: '100px', /* Set width back to default */
height: '100px', /* Set height back to default */
padding: '0px'
}, 500);


});
});


style.css

.example
{
width: 130px;
height: 130px;
}
.imgzoom{

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