构建动态图像库Jquery

时间：2010-12-28 01:00:41

标签： jquery image-gallery

我正在尝试构建此图库：

alt text

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

我也希望让每个缩略图一个接一个地淡入淡出。

1 个答案:

答案 0 :(得分：4)

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

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

我在IE7 / 8，Firefox，Chrome中测试了这个。

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

的 Live Demo 的

<!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>

回复您的评论： Live Demo #2

  • 我让所有“未选中的图片”都有50％的不透明度。
  • 当您将鼠标悬停在图像上时，它会获得100％的不透明度。
  • 访问过的图片有紫色边框而不是红色。
相关问题
最新问题