当用户单击缩略图图像ASP.NET时，如何显示完整图像a

Question

我已经创建了一个程序来查找本地存储的图像，并在站点上显示它们。然而，我注意到，当我只是调整原始图像的大小，并使用它们作为拇指加载时间是荒谬的，因为实际的图像是相当大的。

我有一个文件夹，它以拇指的形式存储这些图像，其名称与原始文件的名称相同，当单击拇指时，如何让它加载原始文件，因为现在它只加载拇指或基于"onclick“我放入JS的完整图像。

​

      < script type = "text/javascript" >
       function Test(url) {
         var img = new Image();
         var bgDiv = document.getElementById("divBackground");
         var imgDiv = document.getElementById("divImage");
         var displayFull = document.getElementById("displayFull");
         var imgLoader = document.getElementById("imgLoader");
         imgLoader.style.display = "block";
         img.onload = function() {
           displayFull.src = img.src;
           displayFull.style.display = "block";
           imgLoader.style.display = "none";
         };
         img.src = url;
         var width = document.body.clientWidth;
         imgDiv.style.display = "block";
         bgDiv.style.display = "block";
         return false;
       } < /script>

<Nodes>
  <asp:TreeNode Text="Niagara Frontier" Value="Niagara Frontier" Expanded="False" SelectAction="Expand">
    <%--<asp:TreeNode Text="2006" Value="2006" Selected="True"></asp:TreeNode>--%>
  <asp:TreeNode Text="2006" Value="2006"></asp:TreeNode>
  <asp:TreeNode Text="2007" Value="2007"></asp:TreeNode>
  <asp:TreeNode Text="2008" Value="2008"></asp:TreeNode>
  </asp:TreeNode>
  <asp:TreeNode Text="Strabag Office Picture folder" Value="Strabag Office Picture folder" SelectAction="Expand"></asp:TreeNode>
</Nodes>


<asp:Repeater ID="RepeaterImages" runat="server" Visible="False">
  <ItemTemplate>
    <asp:ImageButton ID="Image" runat="server" ImageUrl='<%# Container.DataItem%>' ImageAlign="TextTop" Height="100px" Width="150px" Title="Click to Enlarge" OnClientClick="return Test(this.src)" Visible="False" />
  </ItemTemplate>
</asp:Repeater>

<asp:Repeater ID="RepeaterThumbs" runat="server" Visible="False">
  <ItemTemplate>
    <asp:ImageButton ID="Image" runat="server" ImageUrl='<%# Container.DataItem%>' ImageAlign="TextTop" Height="100px" Width="150px" Title="Click to Enlarge" OnClientClick="return Test2(this.src)" Visible="True" />
  </ItemTemplate>
</asp:Repeater>

​

    protected void Page_Load(object sender, EventArgs e)
{
    try
    {
        string textVal = TreeView1.SelectedNode.Text;

        RepeaterImages.Visible = true;
        string[] img = Directory.GetFiles(Server.MapPath("~/Images/" + textVal));
        List<String> images = new List<string>(img.Count());

        foreach (string item in img)
        {
            images.Add(String.Format("~/Images/" + textVal + "/{0}", System.IO.Path.GetFileName(item)));
        }

        RepeaterImages.DataSource = images;
        RepeaterImages.DataBind();

        RepeaterThumbs.Visible = true;
        string[] imgthumb = Directory.GetFiles(Server.MapPath("~/Images/Thumbs/" + textVal));
        List<String> imagesthumb = new List<string>(imgthumb.Count());

        foreach (string item2 in imgthumb)
        {
            imagesthumb.Add(String.Format("~/Images/Thumbs/" + textVal + "/{0}", System.IO.Path.GetFileName(item2)));
        }

        RepeaterThumbs.DataSource = imagesthumb;
        RepeaterThumbs.DataBind();
    }

Answer 1

我用JS解决了它，剪出了指向拇指图像的图像引用部分。JS现在指向根图片文件夹并点击加载这些图像。

​

        function Test2(url) {
            var img = new Image();
            var bgDiv = document.getElementById("divBackground");
            var imgDiv = document.getElementById("divImage");
            var displayFull = document.getElementById("displayFull");
            var imgLoader = document.getElementById("imgLoader");
            imgLoader.style.display = "block";
            img.onload = function() {
              displayFull.src = img.src.replace("Thumbs/", ""); <--- Here
              displayFull.style.display = "block";
              imgLoader.style.display = "none";
            };

img.src = url;

​

Answer 2

整个图像的来源是错误的。您正在将其设置为缩略图的来源，这就是正在显示的内容。您需要从拇指中获取文件名，然后使用正确的路径来获取完整的图像。您可以声明拇指图像和完整图像不在同一个位置，因此将full设置为拇指源只会再次生成拇指图像。