how to display images like facebook or Add Next and Previous Images
<p>when i click on album to following page has been display with all image in album</p>

<p>eachalbum.aspx page</p>

<pre><code>&lt;%@ Page Title="" Language="C#" MasterPageFile="~/master_Main.master" AutoEventWireup="true" EnableEventValidation="true" CodeFile="each_album.aspx.cs" Inherits="each_album" %&gt;

&lt;%@ Register src="user_control/AddAlbumUserControl.ascx" tagname="AddAlbumUserControl" tagprefix="uc1" %&gt;
&lt;%@ Register src="user_control/AddPhotosUserControl.ascx" tagname="AddPhotosUserControl" tagprefix="uc2" %&gt;
&lt;asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"&gt;
    &lt;link href="css/photostyle.css" rel="stylesheet" /&gt;
    &lt;link href="css/NewAlbumCreationStyleSheet.css" rel="stylesheet" /&gt;
    &lt;script src="js/myjqsecond.js"&gt;&lt;/script&gt;
&lt;/asp:Content&gt;
&lt;asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"&gt;

    &lt;div id="DimAllDivs"&gt;
        &lt;div id="EachImageDiv"&gt;
            &lt;div id="previousButton" onclick="DirectionImage('previous');"&gt;&lt;/div&gt;
            &lt;div id="showImage"&gt;
           &lt;/div&gt;
            &lt;div id ="nextButton" onclick="DirectionImage('next');"&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;


    &lt;asp:ScriptManager ID="ScriptManager1" runat="server"&gt;&lt;/asp:ScriptManager&gt;
    &lt;div id="user_div"&gt;

        &lt;div id="user_image_div"&gt;40x40&lt;/div&gt;

        &lt;div id="user_name_div"&gt;&lt;a href="javascript:void(0)"&gt;Nisar Ahmad Albums&lt;/a&gt;&lt;/div&gt;
        &lt;div id="EachAlbumButtons"&gt;
            &lt;div&gt;&lt;asp:Button ID="btnAddPhotos" runat="server" Text="Add Photos" CssClass="AlbumButton" OnClick="btnAddPhotos_Click"/&gt;&lt;/div&gt;
            &lt;div&gt;&lt;asp:Button ID="btnAddAnotherAlbum" runat="server" Text="Add Album" CssClass="AlbumButton" OnClick="btnAddAnotherAlbum_Click"/&gt;&lt;/div&gt;
            &lt;div&gt;&lt;asp:Button ID="btnAlbumSetting" runat="server" Text="Settings" CssClass="AlbumButton"/&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div style="clear:both;"&gt;&lt;/div&gt;

    &lt;div id="AddAlbumDiv"&gt;
        &lt;asp:Panel ID="pnlAddAlbum" runat="server" Visible="false"&gt;
            &lt;%-- This control is used for adding Photos and And Albums --%&gt;
            &lt;uc1:AddAlbumUserControl ID="AddAlbumUserControl1" runat="server" /&gt;
        &lt;/asp:Panel&gt;
    &lt;/div&gt;

    &lt;div id="AddPhotosDiv"&gt;
        &lt;asp:Panel ID="pnlAddPhotos" runat="server" Visible="false"&gt;
            &lt;uc2:AddPhotosUserControl ID="AddPhotosUserControl1" runat="server" /&gt;
        &lt;/asp:Panel&gt;
    &lt;/div&gt;
    &lt;div id="user_photos_generaldiv"&gt;
&lt;div id="your_photos_text"&gt;
&lt;h1&gt;Visit to Agha Khan University Karachi&lt;/h1&gt;

&lt;/div&gt;


&lt;div id="folders"&gt;
       &lt;asp:DataList id="dlImagesDisplay" runat="server" RepeatDirection="Horizontal" RepeatColumns="4"&gt;
                &lt;ItemTemplate&gt;
                    &lt;div id='&lt;%#DataBinder.Eval(Container.DataItem,"PhotoID")%&gt;' class="imageDelete"&gt;
                        &lt;a href="javascript:void(0)" onclick="ibtnDel_Click" runat="server"&gt;&lt;img src="images/icons/mono-icons/stop32.png" 
                                   id='&lt;%#DataBinder.Eval(Container.DataItem,"PhotoID")%&gt;'class="ibtnDel" /&gt;&lt;/a&gt;
                    &lt;/div&gt;
                    &lt;div class="displayImage"&gt;
                        &lt;a href='javascript:void(0)' onclick="showLargImage('&lt;%# DataBinder.Eval(Container.DataItem,"PhotoID")%&gt;'
                            ,'&lt;%# "Gallery/"+DataBinder.Eval(Container.DataItem,"Title")+"/"%&gt;'
                            ,'&lt;%# DataBinder.Eval(Container.DataItem,"AlbumID")%&gt;')" rel=""&gt;
                                    &lt;img src='&lt;%# "Gallery/"+DataBinder.Eval(Container.DataItem,"Title")+"/"
                                    +DataBinder.Eval(Container.DataItem,"PhotoName") %&gt;'
                                         class="displayImage"
                                         onmouseover="OnMouvseOverPict(&lt;%#DataBinder.Eval(Container.DataItem,"PhotoID")%&gt;)"
                                         onmouseout="OnMouseOutPict(&lt;%#DataBinder.Eval(Container.DataItem,"PhotoID")%&gt;)"/&gt;&lt;/a&gt;
                    &lt;/div&gt;
                    &lt;div id="LikeComment"&gt;
                        like Comment
                    &lt;/div&gt;
&lt;/ItemTemplate&gt;
            &lt;/asp:DataList&gt;

&lt;/div&gt;


&lt;/div&gt;
&lt;/asp:Content&gt;
</code></pre>

<p>jquery codeing</p>

<pre><code>function showLargImage(imgId,Loc,AlbumID)
{

    //alert(imgId);
    $.ajax({

        type: 'POST',
        url: 'AjaxFiles/forImage.aspx',
        data: 'ImageId=' + imgId + '&amp;Loc=' + Loc + '&amp;AlbumID=' + AlbumID,
        success: function (data) {
            //$('#requestsentdiv').html(data);
            //$('#requestsentdiv').show();
            $('#DimAllDivs').slideDown();
            $('#showImage').html(data);

        }
    });
}

function LargCancel()
{
    $('#DimAllDivs').slideUp();
}
</code></pre>

<p>forImage.aspx.cs file</p>

<pre><code>using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;


public partial class AjaxFiles_forImage : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        InsertionDAL obj = new InsertionDAL();
        string Phtml="";
        List&lt;EachPicture&gt; picInfo = new List&lt;EachPicture&gt;();
        string imageName = null;
        int ImageId = Convert.ToInt32(Request["ImageId"]);
        string Location = Request["Loc"];
        int albumID = Convert.ToInt32(Request["AlbumID"]);

        string direction = Request["Direction"];
       // Response.Write(ImageId);


        picInfo = obj.GetAlbumPictures(albumID);

        foreach (EachPicture pic in picInfo)
            {
                if (pic.PictureID == ImageId)
                {
                   imageName = pic.PictureName ;
                }
            }

        if(direction == "next")
        {

        }
        else if (direction == "previous")
        {

        }
        int i = 0;
        int var = picInfo.Count();
        //Phtml = picInfo[0][0] + "/////" + picInfo[0][1];
        //rdr = obj.GetPictureInfo(Convert.ToInt32(ImageId));
        //if (rdr.HasRows)
        //{
        //    Phtml = Phtml + "GetInfo";

        Phtml = @"&lt;img src='" + Location + imageName + @"' width='600' height='400' alt='User Image ' onmouseover='showPreviousNext();'
onmouseout='hidePreviousNext();'/&gt;&lt;br/&gt;

            &lt;input type='button' id='LCancel' value='Cancel' onclick='LargCancel();' /&gt;";

        //}
        //else
        //{
        //    Phtml = "&lt;h3&gt;Record Not Found&lt;/h3&gt;";
        //}
        Response.Write(Phtml);
    }
}
</code></pre>

<p>when i click on a single image,a single image has been open
how i will go next and previous images in album?</p>
