Friday, October 21, 2011

zoom images in a Datalist

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;Publish Post

background: #f0f0f0;

left: 0; top: 0;



}