Question
Modify provided template from chapter 5 example (photo viewer) to include the following features: 1. When the user clicks on a picture and it opens
Modify provided template from chapter 5 example (photo viewer) to include the following features:
1. When the user clicks on a picture and it opens a window containing a zoomed version of the image, give her a hyperlink (button) to add the pic to a favorites area at the bottom of the first page (add img nodes to the DOM).
2. A maximum of 5 pics can be added to the favorites. After that a message is displayed to remove at least one favorite first.
3. If the user clicks on a favorite, a Remove link (button) shows up next to that picture. If the user clicks it, the pic is removed from the favorites.
4. Use good web design practices to enhance visually your html page. Add your name and student number, colors, copyright line, etc
This is the HTML Page:
Interactive Slideshow
To view your slides:
- Click the Right or Left arrow buttons to move forward or backward through the image list.
- Click the Play/Pause button to automatically move forward through the image list.
- Click an image to view it in full screen mode.
This is the first JavaScript File:
"use strict";
window.addEventListener("load", createLightbox);
function createLightbox() {
// Lightbox Container
let lightBox = document.getElementById("lightbox");
// Parts of the lightbox
let lbTitle = document.createElement("h1");
let lbCounter = document.createElement("div");
let lbPrev = document.createElement("div");
let lbNext = document.createElement("div");
let lbPlay = document.createElement("div");
let lbImages = document.createElement("div");
// Design the lightbox title
lightBox.appendChild(lbTitle);
lbTitle.id = "lbTitle";
lbTitle.textContent = lightboxTitle;
// Design the lightbox slide counter
lightBox.appendChild(lbCounter);
lbCounter.id = "lbCounter";
let currentImg = 1;
lbCounter.textContent = currentImg + " / " + imgCount;
// Design the lightbox previous slide button
lightBox.appendChild(lbPrev);
lbPrev.id = "lbPrev";
lbPrev.innerHTML = "◀";
lbPrev.onclick = showPrev;
// Design the lightbox next slide button
lightBox.appendChild(lbNext);
lbNext.id = "lbNext";
lbNext.innerHTML = "▶";
lbNext.onclick = showNext;
// Design the lightbox Play-Pause button
lightBox.appendChild(lbPlay);
lbPlay.id = "lbPlay";
lbPlay.innerHTML = "⏯";
let timeID;
lbPlay.onclick = function() {
if (timeID) {
// Stop the slideshow
window.clearInterval(timeID);
timeID = undefined;
} else {
// Start the slideshow
showNext();
timeID = window.setInterval(showNext, 1500);
}
}
// Design the lightbox images container
lightBox.appendChild(lbImages);
lbImages.id = "lbImages";
// Add images from the imgFiles array to the container
for (let i = 0; i < imgCount; i++) {
let image = document.createElement("img");
image.src = imgFiles[i];
image.alt = imgCaptions[i];
image.onclick = createOverlay;
lbImages.appendChild(image);
}
// Function to move forward through the image list
function showNext() {
lbImages.appendChild(lbImages.firstElementChild);
(currentImg < imgCount) ? currentImg++ : currentImg = 1;
lbCounter.textContent = currentImg + " / " + imgCount;
}
// Function to move backward through the image list
function showPrev() {
lbImages.insertBefore(lbImages.lastElementChild, lbImages.firstElementChild);
(currentImg > 1) ? currentImg-- : currentImg = imgCount;
lbCounter.textContent = currentImg + " / " + imgCount;
}
function createOverlay() {
let overlay = document.createElement("div");
overlay.id = "lbOverlay";
// Add the figure box to the overlay
let figureBox = document.createElement("figure");
overlay.appendChild(figureBox);
// Add the image to the figure box
let overlayImage = this.cloneNode("true");
figureBox.appendChild(overlayImage);
// Add the caption to the figure box
let overlayCaption = document.createElement("figcaption");
overlayCaption.textContent = this.alt;
figureBox.appendChild(overlayCaption);
// Add a close button to the overlay
let closeBox = document.createElement("div");
closeBox.id = "lbOverlayClose";
closeBox.innerHTML = "×";
closeBox.onclick = function() {
document.body.removeChild(overlay);
}
overlay.appendChild(closeBox);
document.body.appendChild(overlay);
}
}
This is the second Javascript File:
"use strict";
let lightboxTitle = "My Western Vacation";
// Names of the image files shown in the slideshow
let imgFiles = ["photo01.jpg", "photo02.jpg", "photo03.jpg", "photo04.jpg",
"photo05.jpg", "photo06.jpg", "photo07.jpg", "photo08.jpg",
"photo09.jpg", "photo10.jpg", "photo11.jpg", "photo12.jpg"]
// Captions associated with each image
let imgCaptions = new Array(12);
imgCaptions[0]="Sky Pond (Rocky Mountain National Park)";
imgCaptions[1]="Buffalo on the Plains (South Dakota)";
imgCaptions[2]="Garden of the Gods (Colorado Springs)";
imgCaptions[3]="Elephant Head Wild Flower (Rocky Mountain National Park)";
imgCaptions[4]="Double Rainbow (Colorado National Monument)";
imgCaptions[5]="Moose in the Wild (Grand Lake, Colorado)";
imgCaptions[6]="Camas Wild Flower (Rocky Mountain National Park)";
imgCaptions[7]="Chasm Lake (Rocky Mountain National Park)";
imgCaptions[8]="Teton Crest Trail (Grand Teton National Park)";
imgCaptions[9]="The Notch Trail (Badlands National Park)";
imgCaptions[10]="Sprague Lake (Rocky Mountain National Park)";
imgCaptions[11]="Longs Peak Trail (Rocky Mountain National Park)";
// Count of images in the slideshow
let imgCount = imgFiles.length;
Please help me answer the questions through this template. Where should I make changes and add coding to answer the questions above.. Please take a screenshot of how it would look like in Visual Studio code and post it with the text for the answer.
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started