Web Development with HTML and CSS

Lightbox

download project files
Assessment
Activity
Enlightenment
Lightbox is a library of prewritten
HTML code
CSS code
JavaScript code
HTML and CSS code
CSS and JavaScript code
HTML, CSS, and JavaScript code
What CSS property could be added to the #gallery styles to remove the unintended space between elements?

      this is a more elegant solution than the commenting method used in the video
font-size: none;
font-size: 0;
font-width: none;
font-width: 0;
What additional JavaScript library is required to use LightBox on a website?
jQuery
angular
react
vue
What attribute is used to add Lightbox functionality to an element?
lightbox.option
lightbox-option
data-title
data-lightbox

See the Lightbox

Integrate Lightbox into an image gallery.

Continue the activity from the previous lesson that provides instructions for the first four steps of creating a web gallery.


5. Update the image gallery
  • When a thumbnail image is clicked on, the corresponding image from the "images" folder is displayed via Lightbox.
  • All gallery images should all be part of one group so that a next and previous button appears in the Lightbox to allow the user to move from image to image.
  • Add a caption to each image.

6. Hover effects

Add a hover effect of your liking to the thumbnails of the image gallery.

nothing extra for this lesson :(