我想單擊時顯示特定圖像

Question

我正在開發一個Web模板。我的網頁上有畫廊頁面。我想在特殊div上顯示特定圖像，當我點擊圖像時。我列出的所有圖像<a href="source of the image"></a>

這是我的代碼，請幫我

<div class="p_set" id="object"> 
<table name="portfolios_view" id="table_portfolio" class="posrtfolio_table_class" cellpadding="10" cellspacing="10"> 
<tr> 
<td> 
<a href="" style="text-decoration:none;"> <div id="p_box"><img src="images/portfolio_tumb/1.jpg"></img> <p style="color:#000;font-size:1em; font-family:sans-serif;"> January 2016 <br>A moment 

</p></div></a></td> 


<td> 
<a href="" style="text-decoration:none;"> 
<div id="p_box"> 
<img src="images/portfolio_tumb/2.jpg"></img> 
<p style="color:#000;font-size:1em; font-family:sans-serif;"> February 2016 <br>Black time 
</p></div></a></td> 

<td> 
<a href="" style="text-decoration:none;"> <div id="p_box"><img src="images/portfolio_tumb/3.jpg"></img><p style="color:#000;font-size:1em; font-family:sans-serif;"> January 2016 <br>Tied Up 

</p></div></a></td> 
<td> 
<a href="" style="text-decoration:none;"> <div id="p_box"><img src="images/portfolio_tumb/1.jpg"></img><p style="color:#000;font-size:1em; font-family:sans-serif;"> January 2016 <br>Tied Up 
</p></div></a></td> 
</tr> 
</table> 

是否有任何的方式來顯示特定的圖像，而無需使用任何數據庫？ 請幫我

Answer 1

一個簡單的jQuery的解決方案會是這樣

$("img").click(function() { 

    var img = $(this).clone(); 
    $("#image_viewer").html(img); 
    $("#image_viewer").show(); 
    }); 

使div來你使用CSS所需的寬度

#image_viewer{ 
    width:100%; 
    height:100%; 
} 

編輯：更新小提琴 的jsfiddle： https://jsfiddle.net/qnhdofyf/3/