ASP.NET

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.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Membership not found