<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 id="Head1" runat="server">
<title>Light Box Using Java Script & Css</title>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('a').smoothScroll({
speed: 1000,
easing: 'easeInOutCubic'
});
$('.showOlderChanges').on('click', function (e) {
$('.changelog .old').slideDown('slow');
$(this).fadeOut();
e.preventDefault();
})
});
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-2196019-1']);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js" temp_src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js" temp_src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.smooth-scroll.min.js" temp_src="js/jquery.smooth-scroll.min.js"></script>
<script type="text/javascript" src="js/lightbox.js" temp_src="js/lightbox.js"></script>
<link rel="stylesheet" href="Css/screen.css" temp_href="Css/screen.css" type="text/css"
media="screen" />
<link rel="stylesheet" href="Css/lightbox.css" temp_href="Css/lightbox.css" type="text/css"
media="screen" />
</head>
<body>
<form id="form1" runat="server">
<div class="imageRow">
<div class="set">
<div class="single first">
<a href="Images/examples/image-3.jpg" temp_href="Images/examples/image-3.jpg" rel="lightbox[plants]"
title="Click on the right side of the image to move forward.">
<img src="images/examples/thumb-3.jpg" temp_src="images/examples/thumb-3.jpg" alt="Plants: image 1 0f 4 thumb"
/></a>
</div>
<div class="single">
<a href="Images/examples/image-4.jpg" temp_href="Images/examples/image-4.jpg" rel="lightbox[plants]"
title="Alternately you can press the right arrow key.">
<img src="images/examples/thumb-4.jpg" temp_src="images/examples/thumb-4.jpg" alt="Plants: image 2 0f 4 thumb"
 </div

<div class="single">
<a href="Images/examples/image-5.jpg" temp_href="Images/examples/image-5.jpg" rel="lightbox[plants]"
title="The script preloads the next image in the set as you're viewing.">
<img src="images/examples/thumb-5.jpg" temp_src="images/examples/thumb-5.jpg" alt="Plants: image 3 0f 4 thumb"
/></a>
</div>
<div class="single last">
<a href="Images/examples/image-6.jpg" temp_href="Images/examples/image-6.jpg" rel="lightbox[plants]"
title="Click the X or anywhere outside the image to close">
<img src="images/examples/thumb-6.jpg" temp_src="images/examples/thumb-6.jpg" alt="Plants: image 4 0f 4 thumb"
/></a>
 <div
 </div>
</form>
</body>
</html>

Screenshots

Light Box Effect in ASP.NET using JQuery

Light Box Effect in ASP.NET using JQuery