jQuery：如何使用onClick顯示帶有文本內容的圖像？

Question

這就是我想要做的jQuery：我有四個不同的圖像顯示在一個頁面上。當我點擊一張圖片時，我想讓它放大並放在旁邊的某個位置，我希望將文本附加到圖片上，最好在圖片的側面（或下面）。頁面上的其他所有內容都必須變得模糊（也許這應該用CSS完成，不確定）。

我也應該能夠以某種方式點擊它，也許用'x'按鈕或點擊圖像/文本內容。

由於圖像將顯示在頁面上的不同位置，因此我必須確保文本始終與圖像保持一致。我不希望在顯示所有文本的頁面上的固定位置顯示一般文本框，而是文本必須始終與圖像一起。

任何提示？

UPDATE

好了，所以我設法用的fancybox來解決它，並且代碼的jsfiddle偉大的工作。但是，當我試圖將代碼複製到Notepad ++時，它不再工作了！到目前爲止，我曾嘗試與這些版本的jQuery和的fancybox：

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> 
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" /> 
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script> 

我也複製在其他的jsfiddle項目中使用的代碼，它停止工作了。這怎麼可能？它如何從工作正常到不工作？

Answer 1

取而代之的是：

<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" /> 
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script> 

這樣做：

<link rel="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" /> 
<script type="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>