<%@
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