Join Jen Kramer for an in-depth discussion in this video Linking the thumbnails to the modal windows, part of Bootstrap 3: Adding Interactivity to Your Site.
- View Offline
…So at this point in this document's development we…have two parts to our page all set and coded.…Part one is our actual thumbnails.…And our thumbnails are starting here on line 42, the div with the class of row.…And you have an unordered list with each list item coded with a thumbnail…class that gives it a nice border around it and gets rid of the bullets.…We also have some grid mark up here that is displaying these…pictures either four across at larger…resolutions or two across at smaller resolutions.…
And we have 100 miles of mark up for modal windows that starts down here at line 57.…And there are seven of these, and each one of…these is more information about each one of these executives.…And it contains modal headers, and bodies,…and footers, and all kinds of wonderful markup.…But we have not hooked these two things together yet.…So right now, if we went to the webpage we…can see thumbnails, but if you click on them nothing happens.…So it's finally time to connect these two things in this video.…
So we're going to back up to our thumbnail mark up here, starting on line 44.…
Need help getting Bootstrap up and running? Check out Bootstrap 3 Essential Training.
- Installing Bootstrap 3, Sublime Text 2, and jQuery
- Planning the thumbnail gallery
- Creating modal windows
- Creating an image carousel
- Linking images and adding captions
- Changing the carousel rotation
- Laying out and styling a contact form