我想在点击时显示特定图像

时间:2016-05-10 17:49:59

标签: jquery

我正在开发一个网页模板。我的网页上有画廊页面。当我点击图像时,我想在特殊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>

有没有办法在不使用任何数据库的情况下显示该特定图像? 请帮帮我

1 个答案:

答案 0 :(得分:0)

一个简单的Jquery解决方案就像这样

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

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

使用css将div设为所需的宽度

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

编辑:更新小提琴 的jsfiddle: https://jsfiddle.net/qnhdofyf/3/