Watching:

Add Carousel Images and Captions in jQuery and Dreamweaver


show more Adding carousel images and captions provides you with in-depth training on Web. Taught by Chris Converse as part of the Create a Rotating Carousel with jQuery and Dreamweaver show less
please wait ...

Adding carousel images and captions

So at this point we're ready to add information into our project. Let's come up to the File menu and choose Open, and from the exercise files let's choose Snippets.html, then click Open. Let's switch over to Code view. So, all this file really contains is a series of divs, each one classed as carousel_item, and then inside each carousel_item we have two additional divs with classes, one called class="image" where we have just a standard image tag where we link to the individual teapot graphics, and then a div with a class="caption" where we have a standard h2 and a paragraph tag.

And you can put anything inside of these captions. They don't have to be just an h2 or a paragraph tag; they can have additional graphics or other markup as well. What we're going to be doing in our script is targeting the class image, loading these images into the carousel, and then loading this data into the caption so that when a particular item on the carousel is in the forefront, we load the corresponding caption to show up underneath of it. So, to add this to our page, let's choose Command+Alt or Ctrl+Alt to select all of this copy. Let's come down to the Edit menu and choose Copy to put this on the clipboard.

Let's switch back over to carousel.html. Let's get our curser inside of the Content for "carousel_data" Goes Here. With just a couple of characters selected, let's come over to Code view, and inside of the carousel_data here we're going to come in here and delete all of that default text, and then we're simply going to paste all of that data that we just copied from the Snippets file. Let's come back and choose Design view. So, now we'll see all of the individual teapots with all of the captions in place. So, I can scroll up the document here and look at all of these individual items that will soon be placed along the carousel.

And now that we have all of the HTML in place that's going to act as the data for our carousel, in the next movie we can start writing our JavaScripts.

Adding carousel images and captions
Video duration: 1m 48s 58m 47s Intermediate

Viewers:

Adding carousel images and captions provides you with in-depth training on Web. Taught by Chris Converse as part of the Create a Rotating Carousel with jQuery and Dreamweaver

Subject:
Web
Software:
Dreamweaver jQuery
Author:
please wait ...