Adding the Light Box Effect in ASP.NET using JQuery

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

Ebook Download
View all
Learn
View all