将asp.net页面上的许多图像显示为缩略图

我已将用户上载的图像保存在我的一个文件夹中。在sql server DB中，我只保存图像的文件名。对于一个项目，我有近5-6个图像。所以我有一个itemID作为一列，imagename作为一列，表中有1 2 3 4 5。

---

我需要在一个页面上以缩略图格式显示所有这些图像。就像在craigslist上一样。如何继续？

您可以使用javascript/jQuery图像框显示带有小缩略图的大图像

这是我认识的两个人-

（我目前正在使用）

或者您可以使用以下代码-

演示

.集装箱img{
宽度：100px；
}
$（文档）.ready（函数（）{
$（“.container img”）.mouseover（函数（）{
$（“#”）attr（“src”），$（this.prop（“src”）；
}).mouseout（函数（）{
$（“#”）attr（“src”，
"http://placehold.it/400x400&text=Image1");
});
});

谢谢。嗯，问题是我可以从我的数据库中得到n张图片。我需要以缩略图格式显示所有图片。如果他点击一张，就展开它。就像craigslist一样。当我看到你的上述2个建议，似乎我需要提前提到所有的图片链接。但我的会有所不同。我可以看看你的例子吗？我对这一点有点陌生。我在你的代码中看到你之前提到过ImageURL和5个图像元素。但我的不可能是那样的。我的问题是我可能/可能没有图像。如果我将telerik radgrid放在页面上，并将图像元素（itemtemplate）放在网格中，这会起作用吗？你能告诉我如何使用这种格式吗？谢谢，即使使用radgrid，想法也是一样的。它基本上将mouseout事件/鼠标悬停附加到

容器中的每个图像上

div。在您的情况下，您可以设置为

$（“.RadGrid img”）

。仅供参考，为了在客户端工作，您需要了解一点jQuery或javascript；我正在尝试向客户端的div标记（imagesPreview）添加一个图像。但我得到的是空图像，就像它的中空部分一样。当我检查图像属性时，它显示16.jpg为General，而所有其他值都不可用。这里出了什么问题？web浏览器无法访问您的本地文件系统

src=“C:\\Users\\john\\Desktop\\TempFolder\\16.jpg”

。它必须类似于

/Images/16.jpg

。

<style type="text/css">
    .container img {
        width: 100px;
    }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
    $(document).ready(function () {
        $(".container img").mouseover(function () {
            $("#<%= LargeImage.ClientID %>").attr("src", $(this).prop('src'));
        }).mouseout(function () {
            $("#<%= LargeImage.ClientID %>").attr("src",
            "http://placehold.it/400x400&text=Image1");
        });
    });
</script>

<asp:Image ID="LargeImage" ImageUrl="http://placehold.it/400x400&text=Image1"
    runat="server" />
<div class="container">
    <asp:Image ID="Image1" ImageUrl="http://placehold.it/400x400&text=Image2"
        runat="server" />
    <asp:Image ID="Image2" ImageUrl="http://placehold.it/400x400&text=Image3"
        runat="server" />
    <asp:Image ID="Image3" ImageUrl="http://placehold.it/400x400&text=Image4"
        runat="server" />
    <asp:Image ID="Image4" ImageUrl="http://placehold.it/400x400&text=Image5"
        runat="server" />
</div>