这就是我想用jQuery做的：我在一个页面上显示了四个不同的图像。当我点击一张图片时，我希望它放大，在它旁边的某个地方，我希望文本附加到它上，最好是在图片的侧面(或下面)。页面上的所有其他内容都必须变得模糊(也许这应该用CSS来完成，不确定)。
我也应该能够以某种方式点击它，也许用"x"按钮或在图像/文本内容之外点击。
由于图像将显示在页面的不同位置，我必须确保文本始终与图像保持一致。我不希望在页面上的固定位置上有一个通用的文本框，所有文本都显示在那里，但文本必须始终与图像一起。
有什么建议吗？
更新
好吧，所以我设法通过使用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项目，它也停止了工作。这怎么可能？它怎么能从正常工作变成完全不工作呢？
而不是这个：
<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>