CSS/Javascript灯箱
首先，我将从这个开始：我绝不会塑造或形成开发人员，编码器等等。我只是一个平面设计师，帮助她的网站的朋友。CSS/Javascript灯箱
截至目前，我在衔接缩略图在我的收藏夹完整图像的问题咻 - 你可以在www.chrissybulakites.com
查看该网站，我注意到
随着VOID:(0)在每一个被一个......我的思考过程是，如果我对应0拇指与0完整，然后1拇指与1完整然后2拇指wwith 2满等等等等它会工作..它没有。
有人可以向我解释我是否在正确的道路上，或者我可以做些什么来完成这项工作。
感谢
罗布
功能void()的JavaScript中的意思是 “什么都不做”。这可以防止它加载新的新页面（或打开缩略图）。
onclick = "document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block' "
说，当用户点击该项目将捕获元件light和改变显示为block它也将捕获元件fade和改变显示为block。事情是所有的图像被包裹在一个名为“light”的元素中，所以浏览器选择显示第一个（而不是抛出错误）。
这里有大量的模糊逻辑。
从您加载所有图像（高清图像）开始。
如果你想要我的两分钱（而你只想得到结果，而不是学习JavaScript的工作方式），我会用prettyPhoto这样的东西去实现它，它以一种简单直接的方式实现有据可查。
如何添加prettyPhoto到您的网页？
下载代码并在头上包含Javascript和CSS文件。
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
然后把这个代码的网页上
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
文档说把它放在页面的底部，但你（应该）也把它的头。
然后把带有链接的缩略图放到实际的图像上。 PrettyPhoto会照顾其他一切。请注意0
<a href="img/full/1.jpg" rel="prettyPhoto[my_gal]" title="Caption 1">
<img src="images/thumbnails/t_1.jpg" width="60" height="60" alt="Red round shape" />
</a>
You can customize it further and should really read the manual here.
你需要给每个完整图像的div了自己独特的ID，如：id="image23"。然后修改onclick以引用相应的ID：onclick="document.getElementById('image23')...
所以我显示每个图像在我的CSS与每个div ID？我有点得到你在...至少参考标签...不知道如何创建每个ID来对应我的标签 –
每个图像有两个基本元素;拇指和完整的图像。拇指使用JavaScript来显示和隐藏div（有点像一个框架）来保存完整的图像。
该页面上的HTML重复了很多，你可以解决你的问题，同时删除一些重复。我会保留所有的大拇指，但每个大拇指都加上一个对拇指代表的完整图像的引用。除了减少重复，它还可以使未来更新页面变得更容易，因为更改拇指和主图像是在一个地方而不是两个地方完成的。
在下面我添加了另一部分到“onclick”来说更新'帧'的src是拇指的完整版本。
<a href = "javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';document.getElementById('frame').src='http://chrissybulakites.com/images/longshot_full.png';"><img src="http://chrissybulakites.com/thumbnails/longshot_thumbnail.png" /></a>
然后删除所有的放大图，除了一个，更新它，以便img标签具有“帧”的ID
<div id="light" class="white_content"><img id='frame' src="http://chrissybulakites.com/images/longshot_full.png" /> <br />Actor Observor - Boston, MA <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
<div id="fade" class="black_overlay"></div>
这将意味着每个拇指被点击时，它会做它之前做过的轻微和时尚的比特，但它也会更新正在显示的图像。
做这两个图像作为一个概念证明我得到这样的预期，其工作原理：
<a href = "javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';document.getElementById('frame').src='http://chrissybulakites.com/images/longshot_full.png';"><img src="http://chrissybulakites.com/thumbnails/longshot_thumbnail.png" /></a>
<a href = "javascript:void(0)" onclick ="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';document.getElementById('frame').src='http://chrissybulakites.com/images/actor_full.png';"><img src="http://chrissybulakites.com/thumbnails/actor_thumbnail.png" /></a>
<div id="light" class="white_content"><img id='frame' src="http://chrissybulakites.com/images/longshot_full.png" /> <br />Actor Observor - Boston, MA <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
<div id="fade" class="black_overlay"></div>
我喜欢的功能，prettyPhoto显示..我刚开始困惑，如何初始化它。在他们的文档之后，也许我没有正确阅读它。有什么机会可以帮助我？我将更新index.html页面，以便您可以查看我目前正在做什么 –
@RobertParks，您只需将'javascript'文件包含到您的代码中，并在每张图片上指定一个'rel'。我会更新我的答案，以更好地描述如何去做。 – Frankie