Question

In: Computer Science

javascritp Gallery On the gallery page, include a JavaScript driven photo gallery with at least five...

javascritp

Gallery On the gallery page, include a JavaScript driven photo gallery with at least five (5) images of original work (web pages screen shots, photographs, illustrations, etc) that you have created. The photo gallery must have previous and next buttons to change the image being displayed. Images must wrap to the first image when the next button is clicked while the last image is being displayed. Similarly, images must wrap to the last image when the previous button is clicked while the first image is being displayed. The next image must be displayed after five (5) seconds if the user has not clicked the next button. Use gallery.html as the filename for the Gallery page.

Solutions

Expert Solution

The following code snippet will add a simple javascript based slideshow on a webpage, the slideshow code starts from <div class="slideshow-container">, Although this code is static, this can also be converted to a dynamically generated page using php or any framwork.

<!-- Content for gallery.html -->

<html>

<head>

   <!-- All the required feilds -->

</head>

<body>

<!-- any other data you want to add -->

<!-- slideshow starts -->
<div class="slideshow-container">
  <div class="mySlides fade">
    <div class="numbertext">1 / 5</div>
    <img src="img1.jpg" style="width:100%">
    <div class="text">Caption Text</div>
  </div>
  <div class="mySlides fade">
    <div class="numbertext">2 / 5</div>
    <img src="img2.jpg" style="width:100%">
    <div class="text">Caption Two</div>
  </div>
  <div class="mySlides fade">
    <div class="numbertext">3 / 5</div>
    <img src="img3.jpg" style="width:100%">
    <div class="text">Caption Three</div>
  </div>

 <div class="mySlides fade">
    <div class="numbertext">4 / 5</div>
    <img src="img4.jpg" style="width:100%">
    <div class="text">Caption Three</div>
  </div>

 <div class="mySlides fade">
    <div class="numbertext">5 / 5</div>
    <img src="img5.jpg" style="width:100%">
    <div class="text">Caption Three</div>
  </div>
  <!--  Control buttons -->
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
<!-- circles at the bottom of the images-->
<div style="text-align:center">
  <span class="circles" onclick="currentSlide(1)"></span>

  <span class="circles" onclick="currentSlide(2)"></span>

  <span class="circles" onclick="currentSlide(3)"></span>

  <span class="circles" onclick="currentSlide(4)"></span>

  <span class="circles" onclick="currentSlide(5)"></span>
</div>

<script>
var slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
  showSlides(slideIndex += n);
}

function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var circles = document.getElementsByClassName("circles");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
      circles[i].className = circles[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  circles[slideIndex-1].className += " active";
  setTimeout(showSlides, 2000); // This makes the slideshow automatically start when page loads
}
</script>

this is the CSS used for the slideshow -

* {box-sizing:border-box}

.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.mySlides {
  display: none;
}

.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

.circles {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.active, .dot:hover {
  background-color: #717171;
}


.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

Once implemented properly this will generate something ike this -

venereology answered 6 months ago
Next > < Previous

Related Solutions

Create a JavaScript program that asks for the input of at least five words (a total...
Create a JavaScript program that asks for the input of at least five words (a total of 25+ characters) string from a user and performs the following functions to it: STRING METHODS Check to see if the string input meets the 25+ character limit. If it does not, send a message and ask for another string. Output the original string as it was entered onto the web page document. Output the original string in all lower case letters. Do not...
Using HTML and JAVASCRIPT Create a Content area on the main entry page will include inputs...
Using HTML and JAVASCRIPT Create a Content area on the main entry page will include inputs for customer entry for the following: Entry field (with labeling) for the Customer's name Entry field (with labeling) for the Customer's email address Entry field (with labeling) for which room the customer is planning on painting Entry field (with labeling) for the width of the room Entry field (with labeling) for the length of the room Entry field (with labeling) using a colour box...
Design at least five XML documents. One of these XML is main page.
Description Design at least five XML documents. One of these XML is main page.     There are several links which link to other XML document. Each XML document has an XSLT document which transforms XML document into HTML format.
Put together a one page “cheat sheet” focusing on comparing elephants to humans. Include at least...
Put together a one page “cheat sheet” focusing on comparing elephants to humans. Include at least one picture with each system to help illustrate your answers. Cardiopulmonary Systems How does the internal structure of the heart compare to humans? What effect does this have on the efficiency of this system in your animal? How does this organism obtain oxygen? How is this related to the structure of its cardiopulmonary systems? Immune System Does this animal have an immune system? If...
Put together a one page “cheat sheet” focusing on comparing elephants to humans. Include at least...
Put together a one page “cheat sheet” focusing on comparing elephants to humans. Include at least one picture with each system to help illustrate your answers. Skeletal System What bone(s) in this animal are the most similar to humans? Why (in terms of function) are they so similar? What bone(s) in this animal are the least similar to humans? Why (in terms of function) are they so different? Nervous System How does the brain anatomy compare to humans? What are...
Put together a one page “cheat sheet” focusing on comparing elephants to humans. Include at least...
Put together a one page “cheat sheet” focusing on comparing elephants to humans. Include at least one picture with each system to help illustrate your answers. Digestive System How does this animal get its food? How does that compare to humans? What organs of the digestive system are different in this animal? How are they different, and how does that relate to how this organism gets it food? Urinary System How does the structure of the urinary system in this...
Enumerate at least five specific entrepreneurial aspects to include in a strategy formation process. NB: PLEASE...
Enumerate at least five specific entrepreneurial aspects to include in a strategy formation process. NB: PLEASE EXPLAIN THE 5
Follow these steps to implement the following browser-based puzzle game:(Javascript/html/css) 1. Get a photo of yourself...
Follow these steps to implement the following browser-based puzzle game:(Javascript/html/css) 1. Get a photo of yourself and save it as an image file 2. Use a image-splitting program such as splitter.imageonline.co to break the image into 9 roughly equal parts (3 x 3). Save those files in a directory 3. Write Javascript that takes these nine images and randomly rearranges them in a 3 x 3 grid. 4. Each cell in the grid will also have a checkbox. 5. At...
Please Use JavaScript and P5 1) Greeter Create an page with an input, and a button....
Please Use JavaScript and P5 1) Greeter Create an page with an input, and a button. When the button is clicked, output the phrase "Hello {Name}" to the developer console, with {Name} being the value the user put into the input field. Use a function that takes the name as an argument, and returns the full phrase as its output.
The code to create a Search/Filter Data with Javascript or html from html page.
The code to create a Search/Filter Data with Javascript or html from html page.
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT