How to display images like facebook or Add next and previous images

Question

How to display images like facebook or Add next and previous images

when i click on album to next page is displayed with all image in album

eachalbum.aspx page

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

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

    <div id="DimAllDivs">
        <div id="EachImageDiv">
            <div id="previousButton" onclick="DirectionImage('previous');"></div>
            <div id="showImage">
           </div>
            <div id ="nextButton" onclick="DirectionImage('next');"></div>
        </div>
    </div>


    <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
    <div id="user_div">

        <div id="user_image_div">40x40</div>

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

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

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

</div>


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

</div>


</div>
</asp:Content>

jquery codeing

function showLargImage(imgId,Loc,AlbumID)
{

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

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

        }
    });
}

function LargCancel()
{
    $('#DimAllDivs').slideUp();
}

file forImage.aspx.cs

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<EachPicture> picInfo = new List<EachPicture>();
        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 = @"<img src='" + Location + imageName + @"' width='600' height='400' alt='User Image ' onmouseover='showPreviousNext();'
onmouseout='hidePreviousNext();'/><br/>

            <input type='button' id='LCancel' value='Cancel' onclick='LargCancel();' />";

        //}
        //else
        //{
        //    Phtml = "<h3>Record Not Found</h3>";
        //}
        Response.Write(Phtml);
    }
}