0

我对 PHP 和 jquery 非常陌生，并且正在尝试设置一个带有缩略图的图片库，单击该缩略图时，会在它们上方的 div 中显示更大的图像。

到目前为止，我有这个：

$(function() {
 $('.thumbnail').click(function(e){
  e.preventDefault();
 $("#large").attr('src',"http://something.com/image.jpg");
 });
});

我想要做的是将图像源更改为来自图像数组。例如，当有人单击缩略图 A 时，我希望它将相应的大图像 A 加载到缩略图上方的 div 中。我有两个数组，一个用于缩略图，一个用于较大的图像。似乎是一件非常基本的事情，但就像我说的，我对此完全陌生！

谢谢！

4

3 回答 3

0

您的 javascript 代码看起来正确。我可以看看你的 html 代码吗？

<html>
    <head>
        <title>Test</title>
        <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    </head>
    <body>
        <div id="container">
            <img id="large" src="" />

        </div>
        <div id="thumbnail-container">
            <img class="thumbnail" src="large.PNG" width="50" height="50" alt="test1"/>
            <img class="thumbnail" src="large2.PNG" width="50" height="50" alt="test2"/>

        </div>
        <script>
            $(function() {
 $('.thumbnail').click(function(e){
  e.preventDefault();
 $("#large").attr('src',$(this).attr('[REPLACE_WITH_YOUR_LARGE]'));
 });
});
        </script>

    </body>
</html>

我只是在上面的示例中使用您的 js 代码。

于 2013-09-23T01:38:01.190 回答
0

您需要先将数组传递给您的 javascript，存储在 javascript 数组中，并使用适当的索引（javascript 只接受数字索引），然后使用 click 事件加载它。

有两种方法（据我所知）可以做到这一点。

1）在你的索引页面，加载你的JS文件后，你回<script>loading_function("array_in_string")</script>;显，并在JS中处理字符串并存储到数组中。

2) 使用 Ajax，调用服务器并请求完整列表。

于 2013-09-23T01:38:21.243 回答
0

在缩略图的 HTML 中，添加一个数据标签，例如

<img src="image.jpg" data-full-imgpath="http://..." class="thumbnail" />
<img src="image2.jpg" data-full-imgpath="http://..." class="thumbnail" />

然后将您的 JS 更改为：

$(function() {
    $('.thumbnail').click(function(e){
        e.preventDefault();
        var imgPath = $(this).data("full-imgpath");
        $("#large").attr('src',imgPath);
    });
});
于 2013-09-23T01:38:35.413 回答