你可能看到的灯箱效果，在您的旅行在网络上工作，虽然你可能不知道，这是所谓的灯箱。从本质上讲，一个从图片廊的缩略图的访问者点击，和一个更大的版本出现在页面顶部，调光，它背后的页面的内容。这种广泛使用的效果，使jQuery的使用，最初是由莱安德罗德维埃拉皮尼奥撰写。实际的灯箱效果将会触发我们我们的网页上设置的超链接。他们非常光滑，并在本教程中，你将学习如何构建一个Dreamweaver的 ！

第1步

首先，确认和下载本教程的项目文件。解压缩文件并存储在一个位置的项目文件，你还记得你的桌面一样，。里面的项目文件的文件夹，你会发现2个文件夹，“资产”和“图像”。它们包含我们需要的所有组件。

第2步

现在，继续推出Dreamweaver中 ，选择“ 网站

第3步

下一步，创建一个全新的空白文件，翻转到代码视图，然后将其粘贴

此代码包含链接到外部JavaScript和CSS文件，我们的页面需要，以及一些额外的功能。确保您的文件保存到你作为一个网站上面定义的文件夹。

第4步

现在我们已经准备好页面的结构，框架，将持有我们的缩略图。继续并粘贴

正如你可以看到，有一个外部的“lightboxgallery”

第5步

现在，我们需要我们的缩略图。第一缩图拖放到你的光标

第6步

我们在地方的缩略图，它现在的时间，以配合起来，灯箱脚本发生。如前所述，我们的灯箱脚本是超链接引发的，所以我们就去和设置每幅图像的较大版本的链接，然后测试我们的结果。

翻转到设计视图，选择第一个缩略图图形，然后单击属性检查器“浏览文件”（“链接”字段旁边的文件夹图标）。导航到相应的“images”文件夹中的原图。在这种情况下，“fullsize1.jpg。”每个缩略图重复，每个全尺寸对口联系起来。

第7步

我们终于准备测试的东西！保存文件，然后选择“ 文件”

看看这些

创建图片廊灯箱项目文件