Javascript jquery onclick来自php数组的源图像_Javascript_Php_Jquery_Arrays_Onclick

Javascript jquery onclick来自php数组的源图像

javascript php jquery arrays

Javascript jquery onclick来自php数组的源图像,javascript,php,jquery,arrays,onclick,Javascript,Php,Jquery,Arrays,Onclick,我对PHP和jquery非常陌生，我正在尝试建立一个带有缩略图的图像库，当单击这些缩略图时，会在它们上面的div中显示一个更大的图像到目前为止，我有： $(function() { $('.thumbnail').click(function(e){ e.preventDefault(); $("#large").attr('src',"http://something.com/image.jpg"); }); }); 我要做的是将图像源更改为来自图像数组。例如，当有人单击缩略图A

我对PHP和jquery非常陌生，我正在尝试建立一个带有缩略图的图像库，当单击这些缩略图时，会在它们上面的div中显示一个更大的图像

到目前为止，我有：

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

我要做的是将图像源更改为来自图像数组。例如，当有人单击缩略图A时，我希望它将相应的大图像A加载到缩略图上方的div中。我有两个阵列，一个用于缩略图，另一个用于较大的图像。看起来这是一件很基本的事情，但就像我说的，我在这方面是全新的

谢谢

您的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>


试验
$（函数（）{
$（'.缩略图'）。单击（函数（e）{
e、 预防默认值（）；
$（“#large”）.attr（'src'，$（this）.attr（“[将_替换为_YOUR_large]”）；
});
});

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

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

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

1）在ur索引页面，加载JS文件后，您将回显加载_函数（“数组_in_string”），并在JS中处理字符串并存储到数组中

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

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

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

我的缩略图和大型图像的图像源位于每个页面中包含的外部php文件中。php文件中有一组不同产品的数组（我正在创建一个在线商店）：

$products[101]=array（“name”=>“Object 3”、“imglarge”=>array（“images/products/image1.jpg”、“2”等）、“thumb”=>array（“images/thumbs/thumb1.jpg”、“images/thumbs/thumb2.jpg”等）

每个产品都有多张产品照片（缩略图和大图），因此它们不在HTML中。如何在jquery中包含这些数组中的图像？

$(function() {
    $('.thumbnail').click(function(e){
        e.preventDefault();
        var imgPath = $(this).data("full-imgpath");
        $("#large").attr('src',imgPath);
    });
});