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.