Friday, 8 February 2013

using lightbox in asp.net

using lightbox in asp.net



Step 1)  Download Jquey Lightbox  from

Step 2) Create a Webpage

Step 3)  Copy all js and css folder to your website then Add .js and .css files reference as shown below.
 //make sure paths are correct
    <script src="js/jquery-1.7.2.min.js"></script>
    <script src="js/lightbox.js"></script>
    <link href="css/lightbox.css" rel="stylesheet" />
    <link href="css/screen.css" rel="stylesheet" />

Step 4) Add Image to web page

for ex:  
          Click on Text link display image

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

or  click on thumb nail image display image.
<a href="images/image-1.jpg" rel="lightbox" title="my caption"><img src='images/image-1.jpg'/></a>


Step 5) Step 4 for single image.


Step 6) for multiple images/Popup Image gallery.

 Add n number of images as shown step 4.
 and name all images as single group (as shown below.)
<a href="images/image-1.jpg" rel="lightbox[groupname]" title="my caption"><img src='images/image-1.jpg'/></a>
<a href="images/image-2.jpg" rel="lightbox[groupname]" title="my caption"><img src='images/image-2.jpg'/></a>

Step 7) Make sure all image paths are correct, run the web page.







Complete Code and Images

For focus rectangle on mouse move on images, pls set

<div class="single first">  defined in screen.css

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Lightbox-API-ASPNET.aspx.cs"
    Inherits="WebApplication1.LightBoxUI.Lightbox_API_ASPNET" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
    <link href="css/lightbox.css" rel="stylesheet" />
    <link href="css/screen.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <div class="imageRow">
        <div class="set">
            <div class="single first">
    <a href="../images/Ambassador_brand.jpg" rel="lightbox[brands]" title="Ambassador Brand"><img src="../images/Ambassador_brand.jpg" /></a>
                </div>
            <div class="single">
    <a href="../images/Bata_brand.jpg" rel="lightbox[brands]" title="Bata Brand"><img src="../images/Bata_brand.jpg" /></a>
                                </div>
            <div class="single">

        <a href="../images/footin_brand.jpg" rel="lightbox[brands]" title="Footin Brand"><img src="../images/footin_brand.jpg" /></a>
                                </div>
            <div class="single">

        <a href="../images/North-Star_brand.jpg" rel="lightbox[brands]" title="North Star Brand"><img src="../images/North-Star_brand.jpg" /></a>
                                </div>
            <div class="single last">

        <a href="../images/power_brand.jpg" rel="lightbox[brands]" title="Power Brand"><img src="../images/power_brand.jpg" /></a>
                </div>
        </div>
    </div>
    </form>
</body>
</html>














tags: Jquery image gallery using lightbox in asp.net, using lightbox in asp.net, jquery image gallery,popup image gallery in asp.net