Question

我是PHP和jquery的新手，我正在尝试设置一个带有缩略图的图库，点击这些图片后，在他们上面的div中显示一个更大的图像。

到目前为止，我有这个：

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

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

谢谢！

Answer 1

您的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代码。

Answer 2

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

有两种方式（据我所知）来做这件事。

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

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

Answer 3

在缩略图图像的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);
    });
});

来自php数组的jquery onclick源图像

3 个答案: