0

我试图建立这个画廊：

替代文字

我将如何使用 jquery 构建此图像库，并根据文件夹中的图像数量自动填充缩略图？我想单击缩略图并让它打开一个新页面或具有更大图像的 div。

我还想让每个缩略图一个接一个地淡入 1。

4

1 回答 1

4

此答案仅适用于您问题的 HTML/CSS/jQuery 部分。

如果您想在文件夹中显示图像而不是迷你 Google 徽标，则需要一些用 PHP 或 ASP.NET 等语言编写的简单服务器端代码。如果你使用 PHP，我可以为你写这个。

我已经在 IE7/8、Firefox、Chrome 中测试过了。

在尝试保留您要求的详细信息的同时，我尽可能保持简单：

现场演示

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Demo Gallery</title>
<style type="text/css">
html, body {
    margin: 0; padding: 0; border: 0
}
#container {
    border: 1px solid red;
    background: #eee;
    width: 377px;
    height: 355px;
    padding: 0 0 5px 0;
    overflow-y: scroll
}
#container img {
    border: 1px solid red;
    float: left; margin: 5px 0 0 5px
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    //fill container with test images
    $('#container').append(new Array(60).join('<a href="http://www.google.com/images/logos/ps_logo2.png" target="_blank"><img src="http://www.google.com/images/logos/ps_logo2.png" width="64" height="64" /></a>'))

    var $images = $('#container img');

    $images.hide();

    $images.each(function(index) {
        $(this).delay(index * 50).fadeIn();
    });

});
</script>
</head>

<body>

<div id="container">
    <a href="http://www.google.com/images/logos/ps_logo2.png" target="_blank"><img src="http://www.google.com/images/logos/ps_logo2.png" width="64" height="64" /></a>
</div>

</body>
</html>

回应您的评论：现场演示 #2

  • 我将所有“未选择的图像”设置为 50% 的不透明度。
  • 当您将鼠标悬停在图像上时，它会获得 100% 的不透明度。
  • 访问过的图像有紫色边框而不是红色。
于 2010-12-28T03:08:19.993 回答