Question

    ASP Code is!
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="newappexample._Default" %>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Photo Gallery</title>
            <style type="text/css">
            .black_overlay{
                display: none;
                position: absolute;
                top: 0%;
                left: 0%;
                width: 100%;
                height: 100%;
                background-color: black;
                z-index:1001;
                -moz-opacity: 0.8;
            }
            .white_content {
                display: none;
                position: absolute;
                top: 25%;
                left: 25%;
                width: 50%;
                height: 50%;
                padding: 16px;
                border: 16px solid orange;
                background-color: white;
                z-index:1002;
                overflow: auto;
            }
                    div.center
            {
                margin-left: 20%;
                margin-right: 20%;
                width: 770px;
                background-color:#FFF;
            }
            div.middle
            {
                background-image:url('images/center.jpg');
                background-repeat: repeat-y;
                min-height:200px;
                margin-left: 100px;
                margin-right: 100px;
                margin-top:0px;
                padding-top:0px;
            }
        </style>        
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
    <asp:Panel ID="panelIDtb" BorderColor="Red" BorderStyle="Solid" BackColor="GrayText" BorderWidth="1px" Width="1000px" ScrollBars="Auto" runat="server" Height="130px">
        <asp:Repeater
            id="RepeaterImage"
            runat="server">
            <ItemTemplate>
                <asp:ImageButton id="Image1" Width="100px" Height="100px" OnClientClick="" OnClick="ImageButOnClick"
                    ImageUrl='<%# Container.DataItem %>' Runat="server" />
            </ItemTemplate>
        </asp:Repeater>
        </asp:Panel>
        <div class="middle">
        <asp:Panel ID="PanelBigImage" BorderStyle="Dotted" BackColor="AntiqueWhite" BorderWidth="2px" runat="server" Width="800px" Height="700px">

        </asp:Panel>
        </div>
        </div>
             </form>
    </body>
    </html>


and My C Sharp code behind is!

using System;
using System.Collections;
using System.Drawing;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.IO;
using System.Collections.Generic;

namespace newappexample
{
    public partial class _Default : System.Web.UI.Page
    {
        void Page_Load()
        {
            if (!Page.IsPostBack)
            {
                RepeaterImage.DataSource = GetPhotos();
                RepeaterImage.DataBind();
            }
        }

        public List<String> GetPhotos()
        {
            List<string> photos = new List<string>();
            string photoPath = MapPath("~/myimages/images_tn");
            string[] files = Directory.GetFiles(photoPath);
            foreach (string photo in files)
                photos.Add("~/myimages/images_tn/" + Path.GetFileName(photo));
            return photos;
        }
        public void ImageButOnClick(object sender, EventArgs e)
        {
           // var newP = "Changing Some Paragraph";
           // PanelBigImage.Visible = "";
        }
    }
}

缩略图图像正在显示。当我点击缩略图时，我想预览与该缩略图相关的大图像。我怎样才能做到这一点？？这个任务对我来说是新的，我也是初学者。我google了很多但我没有做出决定，之前我没有使用任何JQuery或javascript。

Answer 1

使用jquery尝试Lightbox之类的内容。易于配置和使用，也带来一些奖励效果。

如何在项目中包含灯箱，并在灯箱网站上记录页面。

更新面板标记，如下所示：

<asp:Panel ID="panelIDtb" BorderColor="Red" BorderStyle="Solid" BackColor="GrayText" BorderWidth="1px" Width="1000px" ScrollBars="Auto" runat="server" Height="130px">
   <asp:Repeater id="RepeaterImage" runat="server">
      <ItemTemplate>
         <div>
            <a href="<%# Container.DataItem %>" rel="lightbox[imgs]"><img src='<%# Container.DataItem %>' /></a>
         </div>
      </ItemTemplate>
   </asp:Repeater>
</asp:Panel>

想在ASP.Net上点击缩略图显示大图像

1 个答案: