Home > ASP.Net, Javascript, Jquery > Use JQuery Fancy Thumbnail Hover Effect with Gridview with Image from Database

Use JQuery Fancy Thumbnail Hover Effect with Gridview with Image from Database


Hi all,

try this example to use JQuery Fancy Thumbnail Hover Effect with Gridview with Image from Database

1) Open MS SQL Server and create new Database and create new Table which contains the following fields :-

– ID –> int – PK (Identity)

– Pic –> nvarchar(150)

2) Download jquery-latest.js

3) Open VS 2010 and create new Web Site and add new Web Page


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
body {
 font: Arial, Helvetica, sans-serif normal 10px;
 margin: 0; padding: 0;
}
* {margin: 0; padding: 0;}
img {border: none;}
.container {
 height: 360px;
 width: 910px;
 margin: -180px 0 0 -450px;
 top: 50%; left: 50%;
 position: absolute;
}
ul.thumb {
 float: left;
 list-style: none;
 margin: 0; padding: 10px;
 width: 360px;
}
ul.thumb li {
 margin: 0; padding: 5px;
 float: left;
 position: relative;
 width: 110px;
 height: 110px;
}
ul.thumb li img {
 width: 100px; height: 100px;
 border: 1px solid #ddd;
 padding: 5px;
 background: #f0f0f0;
 position: absolute;
 left: 0; top: 0;
 -ms-interpolation-mode: bicubic;
}
ul.thumb li img.hover {
 background:url(thumb_bg.png) no-repeat center center;
 border: none;
}
#main_view {
 float: left;
 padding: 9px 0;
 margin-left: -10px;
}
</style>
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){

//Larger thumbnail preview

$("ul.thumb li").hover(function() {
 $(this).css({'z-index' : '10'});
 $(this).find('img').addClass("hover").stop()
  .animate({
   marginTop: '-110px',
   marginLeft: '-110px',
   top: '50%',
   left: '50%',
   width: '174px',
   height: '174px',
   padding: '20px'
  }, 200);
 
 } , function() {
 $(this).css({'z-index' : '0'});
 $(this).find('img').removeClass("hover").stop()
  .animate({
   marginTop: '0',
   marginLeft: '0',
   top: '0',
   left: '0',
   width: '100px',
   height: '100px',
   padding: '5px'
  }, 400);
});

//Swap Image on Click
 $("ul.thumb li a").click(function() {
  
  var mainImage = $(this).attr("href"); //Find Image Name
  $("#main_view img").attr({ src: mainImage });
  return false;  
 });
 
});
</script>
</head>
<body>
    <form id="form1" runat="server">
     <div>
        <asp:DataList ID="DataList1" runat="server" DataKeyField="Id" DataSourceID="SqlDataSource1"
            RepeatColumns="2" RepeatDirection="Horizontal">
            <ItemTemplate>
               <ul>
                <li><a href='<%# Eval("Pic", "{0}") %>'><img src='<%# Eval("Pic", "{0}") %>' alt="" /></a></li>
                </ul>
            </ItemTemplate>
        </asp:DataList>
 <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
            SelectCommand="SELECT * FROM [Photo]"></asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

Hope this helps

Good Luck

Advertisements
Categories: ASP.Net, Javascript, Jquery
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: