asp.net - Facebookのような画像を表示したり、次と前の画像を追加したりする方法

Question

アルバムをクリックして次のページに移動すると、アルバム内のすべての画像が表示されました

eachalbum.aspx ページ

<%@ 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 コーディング

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();
}

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);
    }
}

1 つの画像をクリックすると、1 つの画像が開いていました。アルバム内の次の画像と前の画像に移動するにはどうすればよいですか?