來自php數組的jquery onclick源圖像

我對PHP和jquery非常陌生，並且試圖設置一個帶有縮略圖的圖像庫，當點擊它時，在它們上面的div中顯示一個更大的圖像。來自php數組的jquery onclick源圖像

到目前爲止，我有這樣的：

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

我想要做的是改變圖像源是從圖像陣列。例如，當有人點擊縮略圖A時，我希望它將相應的大圖像A加載到縮略圖上方的div中。我有兩個數組，一個用於縮略圖，一個用於較大的圖像。看起來像是一件非常基本的事情，但就像我說的，我完全是新的！

謝謝！

來源

2013-09-23 user2805440

您的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-23 01:38:01 Vincent

您需要首先將數組傳遞給您的javascript，存儲在一個javascript數組中，並且使用正確的索引（javascript只接受數字索引），然後使用click事件加載它。

有兩種方法（從我的知識）做到這一點。

1）在你的索引頁面，加載你的JS文件後，你回顯<script>loading_function("array_in_string")</script>;，並在JS中處理該字符串並存儲到數組中。

2）使用Ajax，調用服務器並請求完整列表。

來源

2013-09-23 01:38:21 Steven

在縮略圖的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-23 01:38:35 andrewb

我的縮略圖和大圖像的圖像源位於在我已經包含在每個頁面的外部php文件中。這個php文件有一堆用於不同產品的陣列（我正在創建一個在線商店）： '$ products [101] = array（ \t「name」=>「Object 3」， \t「imglarge」= > array（「images/products/image1.jpg」，「2」等），「thumb」=> array（「images/thumbs/thumb1.jpg」，「images/thumbs/thumb2.jpg」等））;' 每個產品都有幾張產品照片（縮略圖形式和大），所以它們不在HTML中。我如何將這些數組中的圖像包含在我的jQuery中？ – user2805440

對不起，我在降價格式方面遇到麻煩 - 我覺得自己像個白癡！ – user2805440

來自php數組的jquery onclick源圖像

回答

相關問題