Join Chris Converse for an in-depth discussion in this video Create, nest, and class DIV tags, part of Create an Interactive Photo Gallery with jQuery and Dreamweaver.
So in Dreamweaver's HTML file, let's come over to Code view.…Now inside of the Code view inside of the body tag, I'm going to hit a few Returns.…And as I was mentioning in the last movie, when we start typing inside of code…view here, Dreamweaver is going to sort of help us code this, and it's even going…to access the CSS rules that we've created.…So let's start by creating our very first div.…I'm going to type the beginning bracket, div, and hit space and type cl for class.…Notice how this pop-up window is coming up and giving me access to everything…that is available, either in HTML or in the CSS that's hooked in.…
So I am going to hit Return to type class, and then I see a dynamic listing of…all of the classes I've created in my CSS document.…I can use my arrow key down and come down to page_container. Hit Return.…I'm going to hit an ending bracket to close the tag.…I'm going to start a new tag hit a forward slash and Dreamweaver will automatically close…that div tag for me.…Now, I'm going to arrow back and get my cursor in between the beginning and…
Download a copy of the finished web site here.
- Preparing gallery photos using Adobe Bridge
- Adding and linking thumbnail images
- Creating the layout in HTML and CSS
- Downloading and adding jQuery to the project
- Creating preview images from anchor links
- Implementing the preload functionality
- Building a customized lightbox with the Fancybox plug-in
- Styling the zoom and contact links
Skill Level Intermediate
Q: The finished state of the interactive photo gallery in this course shows a clickable preview. When you click on the preview image, or on the view larger icon, a larger lightbox image appears. Chris's example has a close button and border surronding the large image, but mine doesn't. Did I miss a step?
Q: This course was updated in April, 2013. What changed?
A: Since the release of this course, Internet Explorer 9 and 10 have been released, and sometimes these browsers do not activate interactive HTML content. To remedy this problem, the author has added a movie to Chapter 10 that will show you how to:
- Update the HTML to HTML5
- Update the version of jQuery
- Use the Google html5shiv to keep compatibility with Internet Explorer 7 & 8