mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
feat(curriculum): add lightbox lab (#56056)
Co-authored-by: Dario-DC <105294544+Dario-DC@users.noreply.github.com>
This commit is contained in:
Zaira
@@ -2032,7 +2032,12 @@
|
||||
"intro": ["In this lab, you will build a real-time character counter"]
|
||||
},
|
||||
"fmbk": { "title": "196", "intro": [] },
|
||||
"nlbo": { "title": "197", "intro": [] },
|
||||
"lab-lightbox-viewer": {
|
||||
"title": "Build a Lightbox Viewer",
|
||||
"intro": [
|
||||
"In this lab, you will build a lighbox viewer for viewing images in a focused mode."
|
||||
]
|
||||
},
|
||||
"workshop-rps-game": {
|
||||
"title": "Build a Rock, Paper, Scissors Game",
|
||||
"intro": [
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
---
|
||||
title: Introduction to the Build a Lightbox Viewer
|
||||
block: lab-lightbox-viewer
|
||||
superBlock: front-end-development
|
||||
---
|
||||
|
||||
## Introduction to the Build a Lightbox Viewer
|
||||
|
||||
In this lab, you will build a lighbox viewer for viewing images in a focused mode.
|
||||
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"name": "Build a Lightbox Viewer",
|
||||
"isUpcomingChange": true,
|
||||
"usesMultifileEditor": true,
|
||||
"dashedName": "lab-lightbox-viewer",
|
||||
"order": 197,
|
||||
"superBlock": "front-end-development",
|
||||
"challengeOrder": [{ "id": "66db57ad34c7089b9b41bfd6", "title": "Build a Lightbox Viewer" }],
|
||||
"helpCategory": "HTML-CSS",
|
||||
"blockType": "lab"
|
||||
}
|
||||
+398
@@ -0,0 +1,398 @@
|
||||
---
|
||||
id: 66db57ad34c7089b9b41bfd6
|
||||
title: Build a Lightbox Viewer
|
||||
challengeType: 14
|
||||
dashedName: build-a-lightbox-viewer
|
||||
demoType: onClick
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
A lightbox displays a larger version of an image when clicked and shadows the rest of the page. This project will create a lightbox gallery that displays full-size images when a thumbnail is clicked. For each image, two versions are provided: a thumbnail and a full-size image. The full-size image is the same as the thumbnail, but without the `-thumbnail` suffix.
|
||||
|
||||
**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab.
|
||||
|
||||
**User Stories:**
|
||||
|
||||
1. You should have a `div` with a class of `gallery` within your `body`.
|
||||
1. Within the `.gallery` element, you should have three image thumbnails, each with a class of `gallery-item`. You should use the following links for thumbnail images:
|
||||
|
||||
- `https://cdn.freecodecamp.org/curriculum/labs/stonehenge-thumbnail.jpg`
|
||||
- `https://cdn.freecodecamp.org/curriculum/labs/storm-thumbnail.jpg`
|
||||
- `https://cdn.freecodecamp.org/curriculum/labs/trees-thumbnail.jpg`
|
||||
|
||||
1. You should have a `div` with a class of `lightbox` within your `body`.
|
||||
1. You should have a `span` with an `id` of `close` within your `.lightbox` element. You can use `×` as its text if you want.
|
||||
1. You should have a `img` with an `id` of `lightbox-image` within your `.lightbox` element.
|
||||
1. Your `.lightbox` element should have a fixed position so that the preview opens on top of the current images.
|
||||
1. Your `.lightbox` element should cover the entire viewport by setting the height and width to 100% of the container. You should ensure that the lightbox element starts at the top left corner of the container.
|
||||
1. `.lightbox` should have a background color. Initially, its `display` property should be set to `none` to hide it.
|
||||
1. When you click one of your `.gallery-item` elements, the `.lightbox` element’s `display` property should be set to `flex` to make `.lightbox` and the two elements within it visible.
|
||||
1. When you click one of your `.gallery-item` elements, the `#lightbox-image` element’s `src` should be set to a full-size version of the image clicked by removing `-thumbnail` from the image’s `src` attribute. The full-size images are located at the following links:
|
||||
|
||||
- `https://cdn.freecodecamp.org/curriculum/labs/stonehenge.jpg`
|
||||
- `https://cdn.freecodecamp.org/curriculum/labs/storm.jpg`
|
||||
- `https://cdn.freecodecamp.org/curriculum/labs/trees.jpg`
|
||||
|
||||
1. When your `.lightbox` element is visible and you click the `#close` button or the `.lightbox` element, the `.lightbox` elements `display` should be set back to `none`.
|
||||
|
||||
**Note:** Be sure to link your stylesheet and the JavaScript file in your HTML.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `div` with the class of `gallery` inside your `body` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('body .gallery')?.tagName, 'DIV');
|
||||
```
|
||||
|
||||
Within the `.gallery` `div`, you should have three image elements with the class of `gallery-item`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.gallery .gallery-item').length, 3);
|
||||
```
|
||||
|
||||
Within the `.gallery` `div`, you should an image element with the `src` set to `https://cdn.freecodecamp.org/curriculum/labs/stonehenge-thumbnail.jpg`.
|
||||
|
||||
```js
|
||||
const images = document.querySelectorAll('.gallery .gallery-item');
|
||||
let srcCount = 0;
|
||||
const targetSrc = 'https://cdn.freecodecamp.org/curriculum/labs/stonehenge-thumbnail.jpg';
|
||||
|
||||
for (let image of images) {
|
||||
if (image.src === targetSrc) {
|
||||
srcCount++;
|
||||
}
|
||||
}
|
||||
|
||||
assert(srcCount === 1);
|
||||
```
|
||||
|
||||
Within the `.gallery` `div`, you should an image element with the `src` set to `https://cdn.freecodecamp.org/curriculum/labs/storm-thumbnail.jpg`.
|
||||
|
||||
```js
|
||||
const images = document.querySelectorAll('.gallery .gallery-item');
|
||||
let srcCount = 0;
|
||||
const targetSrc = 'https://cdn.freecodecamp.org/curriculum/labs/storm-thumbnail.jpg';
|
||||
|
||||
for (let image of images) {
|
||||
if (image.src === targetSrc) {
|
||||
srcCount++;
|
||||
}
|
||||
}
|
||||
|
||||
assert(srcCount === 1);
|
||||
```
|
||||
|
||||
Within the `.gallery` `div`, you should an image element with the `src` set to `https://cdn.freecodecamp.org/curriculum/labs/trees-thumbnail.jpg`.
|
||||
|
||||
```js
|
||||
const images = document.querySelectorAll('.gallery .gallery-item');
|
||||
let srcCount = 0;
|
||||
const targetSrc = 'https://cdn.freecodecamp.org/curriculum/labs/trees-thumbnail.jpg';
|
||||
|
||||
for (let image of images) {
|
||||
if (image.src === targetSrc) {
|
||||
srcCount++;
|
||||
}
|
||||
}
|
||||
|
||||
assert(srcCount === 1);
|
||||
```
|
||||
|
||||
You should have a `div` element with the class of `lightbox` inside your `body` element.
|
||||
|
||||
```js
|
||||
// assert either div or span
|
||||
assert.exists(document.querySelector('body .lightbox'));
|
||||
```
|
||||
|
||||
Within your `.lightbox` `div`, you should have a `span` element with the `id` set to `close`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('.lightbox #close').tagName, 'SPAN');
|
||||
```
|
||||
|
||||
Within your `.lightbox` `div`, you should have an `img` element with the `id` set to `lightbox-image`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('.lightbox #lightbox-image').tagName, 'IMG');
|
||||
```
|
||||
|
||||
Your `.lightbox` element should have fixed positioning.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.lightbox')?.position, 'fixed');
|
||||
```
|
||||
|
||||
Your `.lightbox` element should cover the entire viewport.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.lightbox')?.width, '100%');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.lightbox')?.height, '100%');
|
||||
```
|
||||
|
||||
Your `.lightbox` element should be aligned with top left corner of the container.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.lightbox')?.top, '0px');
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.lightbox')?.left, '0px');
|
||||
```
|
||||
|
||||
Your `.lightbox` element should have a background color.
|
||||
|
||||
```js
|
||||
assert(new __helpers.CSSHelp(document).getStyle('.lightbox')?.backgroundColor);
|
||||
```
|
||||
|
||||
Your `.lightbox` element should be hidden initially.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.lightbox')?.display, 'none');
|
||||
```
|
||||
|
||||
When you click one of your `.gallery-item` elements, the `.lightbox` element’s `display` property should be set to `flex` to make to make `.lightbox` and the two elements within it visible.
|
||||
|
||||
```js
|
||||
// Get the lightbox element
|
||||
const lightbox = document.querySelector(".lightbox");
|
||||
|
||||
// Function to get the computed style
|
||||
function getComputedDisplay(element) {
|
||||
return window.getComputedStyle(element).display;
|
||||
}
|
||||
|
||||
// Initial assertion: check if lightbox is hidden
|
||||
assert.strictEqual(getComputedDisplay(lightbox), 'none');
|
||||
|
||||
// Simulate a click event on a gallery item (ensure you have a reference to one)
|
||||
// Here, assuming there's an element with class '.gallery-item' that triggers the display change
|
||||
const galleryItem = document.querySelector('.gallery-item');
|
||||
galleryItem.dispatchEvent(new Event('click'));
|
||||
|
||||
// Wait for any potential async operations to complete (if necessary)
|
||||
// This might be needed if you have asynchronous operations triggered by the click event
|
||||
// await new Promise(resolve => setTimeout(resolve, 100)); // Adjust timeout as needed
|
||||
|
||||
// Assertion: check if lightbox is visible
|
||||
assert.strictEqual(getComputedDisplay(lightbox), 'flex');
|
||||
```
|
||||
|
||||
When you click one of your `.gallery-item` elements, the `#lightbox-image` element’s `src` should be set to a full-size version of the image clicked by removing `-thumbnail` from the image’s `src` attribute.
|
||||
|
||||
```js
|
||||
// Select gallery items and lightbox image element
|
||||
const galleryItems = document.querySelectorAll(".gallery-item");
|
||||
const lightboxImage = document.getElementById("lightbox-image");
|
||||
|
||||
assert.isAbove(galleryItems.length, 0);
|
||||
|
||||
// Function to extract the full-size image URL from a thumbnail URL
|
||||
function getFullSizeImageUrl(thumbnailUrl) {
|
||||
return thumbnailUrl.replace('-thumbnail', '');
|
||||
}
|
||||
|
||||
// Simulate a click event on each gallery item and check the lightbox image source
|
||||
galleryItems.forEach((item) => {
|
||||
const thumbnailUrl = item.src; // The src of the clicked image
|
||||
const expectedFullSizeUrl = getFullSizeImageUrl(thumbnailUrl);
|
||||
|
||||
// Simulate click event
|
||||
item.dispatchEvent(new MouseEvent('click', { bubbles: true }));
|
||||
|
||||
// Wait for any async operations if needed
|
||||
// await new Promise(resolve => setTimeout(resolve, 100)); // Adjust timeout as needed
|
||||
|
||||
// Assert that the lightbox image src is updated correctly
|
||||
assert.strictEqual(lightboxImage.src, expectedFullSizeUrl);
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
When your `.lightbox` element is visible and you click anywhere outside the image, the `.lightbox` elements `display` should be set back to `none`.
|
||||
|
||||
```js
|
||||
// Get the lightbox and a background element (or the document) for simulating clicks outside
|
||||
const lightbox = document.querySelector(".lightbox");
|
||||
const background = document.getElementById("close"); // Assume you have an element representing the outside area
|
||||
|
||||
// Function to get the computed display property
|
||||
function getComputedDisplay(element) {
|
||||
return window.getComputedStyle(element).display;
|
||||
}
|
||||
|
||||
// Make sure the lightbox is visible initially
|
||||
assert.strictEqual(getComputedDisplay(lightbox), 'flex');
|
||||
|
||||
// Simulate a click outside the lightbox
|
||||
background.dispatchEvent(new Event('click'));
|
||||
|
||||
// Wait for any async operations if needed
|
||||
// await new Promise(resolve => setTimeout(resolve, 100)); // Adjust timeout as needed
|
||||
|
||||
// Assert that the lightbox is hidden after clicking outside
|
||||
assert.strictEqual(getComputedDisplay(lightbox), 'none');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Lightbox Viewer</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
|
||||
```
|
||||
|
||||
```js
|
||||
|
||||
```
|
||||
|
||||
# --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Image Gallery with Lightbox</title>
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="title"><h1>Museum Gallery</h1></div>
|
||||
|
||||
<div class="gallery">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/labs/stonehenge-thumbnail.jpg" alt="Image 1" class="gallery-item">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/labs/trees-thumbnail.jpg" alt="Image 2" class="gallery-item">
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/labs/storm-thumbnail.jpg" alt="Image 3" class="gallery-item">
|
||||
</div>
|
||||
|
||||
<div id="lightbox" class="lightbox">
|
||||
<span id="close" class="close">×</span>
|
||||
<img id="lightbox-image" src="" alt="Lightbox Image">
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #f0f0f0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-top: 100px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
background-color: rgb(211, 221, 224);
|
||||
|
||||
}
|
||||
|
||||
.gallery {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
|
||||
}
|
||||
|
||||
.gallery-item {
|
||||
width: 250px;
|
||||
height: 300px;
|
||||
object-fit: cover;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.gallery-item:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.lightbox {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.lightbox img {
|
||||
max-width: 90%;
|
||||
max-height: 90%;
|
||||
}
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
font-size: 2em;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
```
|
||||
|
||||
```js
|
||||
// Get references to the elements
|
||||
const galleryItems = document.querySelectorAll(".gallery-item");
|
||||
const lightbox = document.getElementById("lightbox");
|
||||
const lightboxImage = document.getElementById("lightbox-image");
|
||||
const closeButton = document.getElementById("close");
|
||||
|
||||
// Function to open the lightbox
|
||||
function openLightbox(src) {
|
||||
lightboxImage.src = src;
|
||||
lightbox.style.display = "flex"; // Show the lightbox
|
||||
}
|
||||
|
||||
// Function to close the lightbox
|
||||
function closeLightbox() {
|
||||
lightbox.style.display = "none"; // Hide the lightbox
|
||||
}
|
||||
|
||||
// Add event listener to the close button
|
||||
closeButton.addEventListener("click", closeLightbox);
|
||||
|
||||
// Add event listener to the lightbox background
|
||||
lightbox.addEventListener("click", (e) => {
|
||||
if (e.target === lightbox) {
|
||||
closeLightbox(); // Close lightbox if clicking outside the image
|
||||
}
|
||||
});
|
||||
|
||||
// Add event listeners to gallery items
|
||||
galleryItems.forEach((item) => {
|
||||
item.addEventListener("click", () => {
|
||||
openLightbox(item.src.replace("-thumbnail", "")); // Open lightbox with the full image
|
||||
});
|
||||
});
|
||||
```
|
||||
Reference in New Issue
Block a user