Publicité
Can someone please help me with this assignmentModify the chapter .pdf
Can someone please help me with this assignmentModify the chapter .pdf
Can someone please help me with this assignmentModify the chapter .pdf
Can someone please help me with this assignmentModify the chapter .pdf
Prochain SlideShare
Joomla v-15-squeezebox-in-your-joomla-websiteJoomla v-15-squeezebox-in-your-joomla-website
Chargement dans ... 3
1 sur 4
Publicité

Contenu connexe

Plus de sales88(20)

Publicité

Can someone please help me with this assignmentModify the chapter .pdf

  1. Can someone please help me with this assignment Modify the chapter 5 example (photo viewer) to include the following features: 1. When the users click on a picture and it opens a div containing a zoomed version of the image, add a hyperlink (button) to allow users to insert the clicked picture to a favorites list area at the bottom of the first page (add img nodes to the DOM). BONUS (10%): Show the zoomed version on a new window. 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 picture, a Remove link (button/anchor) shows up next to that picture. If the user clicks it, the pic is removed from the favorites. 4. (10% of the grade) Use good web design practices to enhance visually your html page. Add a title, picture, copyright line, etc. I need to modify the follow code to add the above features HTML Chapter 5 Case ProblemInteractive 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. JavaScript "use strict"; /* JavaScript 7th Edition Chapter 5 Chapter Case Application to generate a slide show Author: Date: Filename: js05.js */ window.addEventListener("load", createLightbox); function createLightbox() {
  2. // 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);
  3. lbPlay.id = "lbPlay"; lbPlay.innerHTML = ""; let timeID; lbPlay.onclick = function(){ if(timeID !== undefined){ // Stop the slideshow clearInterval(timeID); timeID = undefined; }else{ // Start the slideshow showNext(); timeID = 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 showNext(){ lbImages.appendChild(lbImages.firstElementChild); (currentImg < imgCount) ? currentImg++ : currentImg = 1; lbCounter.textContent = currentImg + " / " + imgCount; } function showPrev(){ lbImages.insertBefore(lbImages.lastElementChild, lbImages.firstElementChild); (currentImg > 1) ? currentImg-- : currentImg = imgCount;
  4. 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); // Append to the body of the document document.body.appendChild(overlay); } }
Publicité