如何在Dreamweaver中创建的jQuery图片廊灯箱 : macProVideo.com

在Dreamweaver中创建的jQuery图片廊灯箱

Geoff Blake on Sat, June 18th 9 comments

Language

You've probably seen the Lightbox effect at work during your travels on the web, although you may not have known that it was called Lightbox.

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

第1步

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

第2步

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

第3步

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

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

第4步

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

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

第5步

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

第6步

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

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

第7步

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

看看这些

创建图片廊灯箱项目文件

Geoff Blake

Geoff Blake is a book author, video presenter, designer, and visual artist. As an in demand live-on-stage software educator since 1997, Geoff has taught desktop publishing, web design and graphics courses all over North America and is regarded as an expert in Adobe's Creative Suite applications, as well as in HTML, CSS, WordPress, and related technologies. With his humorous, non-jargonny approach, Geoff produces highly regarded articles, video training and DVDs, and regularly contributes to top industry magazines and websites.

Related Videos

Comments (9)

You must be logged in to comment.

Hi there, I can't seem to find the project files(zip folder) to download, that is needed for this tutorial???
- 8 years ago
- By:
Reply
Rounik Admin

Hi, They are hyperlinks in the text (in blue) in Step 3, Step 4 and the very last line of this tutorial is a link: "Create Image Gallery Lightbox Project Files". Just click on these to begin downloading the files. Hope this helps Rounik
- 8 years ago
- By: Rounik Admin
Reply
Thanks for the reply. I have a website up but I want my photography page to have a lightbox, but when I try and do it on the content page which is an ap div, it doesnt seem to show up at all??? Am I doing something wrong with placing the code maybe???
- 8 years ago
- By:
Thanks for the previous reply. I now got that done but I have a website already up but I want to have a lightbox on my photography page in the content area. The content area box is an ap div though, and I did the exact same procedure with the code and all but it doesnt show up when I refresh the page????
- 8 years ago
- By:
Reply
Un souci ds votre tuto je ne trouve pas les code a copier coller ds dreamweaver ds le fichier que jai telecharger et dc je peu rien fr sur dream sauf si fo recopier ce que vous avez marquer sur votre excemple tuto
- 8 years ago
- By:
Reply
wow!!!this tutorial was helpful....but what about prev,next,close and loading icons....hope you will provide the tutorials about that...
- 7 years ago
- By:
Reply
azex

hi, 4 images is looks simple. but, how about if the images is hundred over..? do i need to edited one by one? any other way to simplify it.
- 7 years ago
- By: azex
Reply
Ian

Thanks Geoff, That's a fantastic tutorial for someone like me who sits more on the creative side but sometimes needs to pretend he is a programmer!! The code works perfectly well. I am wondering if there is a fairly simple option - or a tutorial of yours somewhere else - to show how to add descriptive text for each image when it is displayed in the Lightbox, rather than just the "Image 4 of 14" text? Cheers, Ian
- 7 years ago
- By: Ian
Reply
Emily

Is there a way to add HTML content (like another webpage) to pop up in the lightbox as well?
- 7 years ago
- By: Emily
Reply

Edit Photos in Photoshop Elements 2020

Photoshop Elements 101