blogspot visit counter

Thursday, 20 March 2014

jquery lightbox in asp.net

jquery lightbox in asp.net
In this article i am explained  how we can implement the jQuery lightbox in our site.This is very easy to implement follow the instruction below step by step 

 jQuery scripts used in your projects. Simple show(), hide() will make this ready to use jQuery Lightbox. It’s simple and free download and easy to integrate in your projects. Below code will explain you how to make this simple jquery lightbox.



Step 1 Create a file called index.aspx

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

<!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>Ligh Box(http://dotnethubs.blogspot.in) </title>

    <link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript">
    function load_as_lightbox() {
        var DocumentHeight = $(document).height();
        $('.as_lightbox_wrapper').css('height', DocumentHeight); // Set document height for As_Lightbox wrapper
    }
    function ShowLightBox(DivId) {
        $('.as_lightbox_wrapper').show(); // Show the wrapper
        $('#' + DivId + '').show('slow'); // Show the Lightbox div, you can use another jQuery view functions such as fadeIn, fadeToggle for animations
    }
    function HideLightBox(DivId) {
        $('.as_lightbox_wrapper').hide('slow'); // Hide the As_Lightbox wrapper
        $('#' + DivId + '').hide(); // Hide the div
    }
    $(document).ready(function () {
        load_as_lightbox(); // call this function after document loads
        $('#Show_Lightbox').click(function () {
            ShowLightBox('Simple_Lightbox'); // call the As_Lightbox show function
            return false;
        });
        $('#as_lightbox_close').click(function () {
            HideLightBox('Simple_Lightbox'); // call the As_Lightbox close function
            return false;
        });
    });
</script>
<style type="text/css">
.as_wrapper{
    font-family:Arial;
    color:#333;
    font-size:14px;
    padding:20px;
    border:2px dashed #17A3F7;
    width:200px;
    margin:0 auto;
    margin-top:50px;
}
</style>
</head>
<body>
    <form id="form1" runat="server">
    <!-- AS_lightbox div (division) starts -->
<div class="as_lightbox_wrapper"></div> <!-- As_lightbox wrapper (half transparent background) -->
<div class="as_lightbox_container" id="Simple_Lightbox"> <!-- Set ID As_Lightbox here -->
    <div class="as_lightbox">
        <div class="as_lightbox_close" id="as_lightbox_close">
            <img src="images/close_flat_icon.png" alt="Close Lightbox" title="Close" />
        </div> <!-- As_Lightbox close icon -->
        <div class="as_clear"></div>
        <!-- As_Lightbox contents will starts here-->
        <p>As-Lightbox content will goes here. You can add any contents Texts, Images, Videos here. It wont conflict will other scripts Simple jQuery show(), hide() gives this lightbox</p>
        <!-- As_Lightbox contents ends here -->
    </div>
</div>
<!-- AS_lightbox div (division) Ends -->
<div class="as_wrapper">


<br/><br/>
<center>
<a id="Show_Lightbox" class="as_a">Show Lightbox</a>
</center>
</div>
    </form>
</body>
</html>

Step 2 create a file called style.css:

body{
    margin:0;
    padding:0;
    font-family:Arial;
}
.as_clear{
    clear:both;
}
.as_a{
    text-decoration:underline;
    color:#17A3F7;
    cursor:pointer;
}
.as_lightbox_wrapper{
    width:100%;
    position:absolute;
    top:0;
    left:0;
    z-index:100;
    background:url(../images/as_popup_wrapper_bg.png);
    display:none;
}
.as_lightbox_close{
    position:absolute;
    right:0;
    z-index:102;
    height:32px;
    width:32px;
    top:-25px;
    right:-25px;
    cursor:pointer;
}
.as_lightbox_container{
    z-index:101;
    position:fixed;
    width:200px;
    height:200px;
    background:#FFF;
    left:31%;
    top:13%;
    padding:10px;
    border-radius:2px;
    display:none;
}

Output as shown below at run time

 Click on show lightbox link then lightbox popup is shown as below



Download sample code attached

 Jquery LightBox



No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...