Lightbox in ASP.NET Connected With SQL Server

Solution

I am working on a web application which requires LightBox on the home page. I had searched a lot on the web. There are many solutions available, but one limitation is that if you want to show a gallery with previous and next buttons then you have to load all the images on pageload in the LightBox code. In my application I have a large amount of media that makes my site slow. This article explains what I did to solve the problem. I hope this will be useful for someone. So to solve this issue I customize a LightBox according to my need. A fully working description is given below.

1. Add references
   
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script> <link rel="stylesheet" href="css/lightbox.css" type="text/css"/>
   
   
2. Take one anchor tag
   
   Here I am taking my anchor tag in a repeater control:
   
   <a href='#' title='<%# Eval("title of your image")%>' onclick="bindMediaID(<%#    Eval("MediaID")%>,'C')">
   
   
3. Call Javascript function
   
   
   Here call the bindMediaID method. 
   
   function bindMediaID(mediaID,nev)
        {
    PageMethods.SlideShow(parseInt(mediaID), nev, OnSucceededID, OnFailedID);
        }
        function OnSucceededID(result, methodName)
        {
             var str = result.split('~');
          var data ='<div id="lightbox" style="top: 1px;left: 0px;display:none;">'+    
   '<div id="outerImageContainer" style="height: auto;max-height:470px; font-size:72.192px;width:auto; max-width:600px ">'+
                      '<div id="imageContainer"><img id="lightboxImage" src="'+str[0]+'"
           style="max-height:470px;">'+
                          '<div style="" id="hoverNav">'+
                              '<a href="#" id="prevLink"></a>'+
                             '<a href="#" id="nextLink"></a>'+
                          '</div>'+
                      '</div>'+
                      '<div id="imageDataContainer" style="width:600px;padding-top:20px;">'+
                      '<div id="imageData">'+
                          '<div id="imageDetails">'+
                              '<span id="caption">'+str[3]+'</span>'+
                              '<span id="numberDisplay"  style="width: 100%;margin-top:    10px;float: left;">'+str[4]+'<ahref="#"id="bottomNavClose">'+
                                 '<imgsrc="images/uplode_form_close_button.png">'+
                             '</a>'+'</span>'+
                         '</div>'+                     
                     '</div>'+
                 '</div>'+
                 '</div>'+
              '</div>';
         jq(data).appendTo("body");
         jq("#lightbox").fadeIn("slow", function(){ jq("#lightbox").show(); });
         jq("#imageData").slideDown("slow");

         if(str[1] != "0")
         {
          pId = str[1];
          }
          else
         {
             jq("#prevLink").hide();
         }
    
         if(str[2] != "0")
         {

           nId = str[2];
         }
         else
         {
           jq("#nextLink").hide();
          }
          jq("#loading").fadeOut('slow');
    
        }
         jq(document).ready(function() {
    
        // Add the page method call as an onclick handler for the div.
        jq("#prevLink").live("click", function(){
         bindMediaID(pId,"P");
    
       });
    
        jq("#nextLink").live("click", function(){
        bindMediaID(nId,"N");
    
       });
    
        jq("#bottomNavClose").live("click", function(){
        jq("#overlay").fadeOut('slow', function(){ jq("#overlay").remove(); });
        jq("#lightbox").fadeOut('slow', function(){ jq("#lightbox").remove(); });
        });
    
        });
        function OnFailedID(error, methodName) {
               if (error !== null) {
                  alert(error.get_message());
               }
           }
   

4. Call Server Side method
   
   In the third step I am calling the page method SlideShow which is defined on the server side. So you can call this method as follows:
   
   [System.Web.Services.WebMethod(enableSession: true)]
            public static string SlideShow(int media, string nev)
            {
              string str = (call static method here which deal with your media table etc. I am calling my Sql table here to fetch info);      
              //here I am returning current media with web path of directory, previous media, next   media, caption of media and page number info like
                 return   "localhost://content/CurrentMedia~PreviousMedia~NextMedia~Caption~pagenumber";
            }

Hope this helpful for someone.