2021-01-11

JavaScript Slideshow

Let's make a slide show

fullslides

The html

<html>, <head> & <body> elements

First we are going to start off with our html document. This tells the browser where to start reading html, although it will still read anything you put inside of a file with a .html extention it's best practice to do this 

<html>
</html>

Then we are going to add a <head> and a body tag within our html tags. Elements within the <head> tag are not rendered to the user. The <head> tag is where we are going to link our css and javascript files so we still need it. Elements within the <body> tag are rendered to the user

<html>
    <head>
        <!-- Links and stuff not rendered to the user -->
    </head>
        <body>
            <!-- Where our content will be rendered to the user -->
        </body>
</html>

Add a <div> element with the class container within the <body> body elements. The class key word is an html attribute.

    <body>
        <div class="container">
    </body>

But what is an HTML attribute?

  • Attributes add functionality to HTML elments. All HTML elements can have attributes
    • The href attribute of <a> specifies the URL of the page the link goes to
    • The src attribute of <img> specifies the path to the image to be displayed
    • The width and height attributes of <img> provide size information for images
    • The alt attribute of <img> provides an alternate text for an image
    • The style attribute is used to add styles to an element, such as color, font, size, and more
    • The lang attribute of the <html> tag declares the language of the Web page
    • The title attribute defines some extra information about an element

So what does the <div> element do and how does the class="container" attribute effect it?

<div> is an arbitrary element that is used to define divisions in the sections of an HTML document, The resson we add the class="container" attribute to it is so we can later access that element and its nested contents when modifying the document with CSS and javascript.

Adding the large images

Make sure to close the <div class="containter"> element with a closing </div> tag. Then add another <div> element with the class mySlides. 

 <div class="mySlides">

 </div>

Within this div we are going to add another div with the class numbertext and close it on the same line

    <div class="mySlides">
        <div class="numbertext"> </div>
    </div>

Then under that div we are going to add an <img> element which will render our image to the user. It needs two attributes. - The src attribute will be the filepath to the image we want to display - The style attribute allows for inline CSS (Cascading Style Sheets) in this case the css makes sure the rendered image takes up 100% of the users screen. 

    <div class="mySlides">
        <div class="numbertext"></div>
        <img src="imgs/img_woods_wide.jpg" style="width:100%">
    </div>

Do this for each file in the imgs directory ending with the word wide . Can anyone guess why we need two seprate image sizes?

https://github.com/RaiderHacks/10-20/blob/master/notes.assets/image-20201019160812543.png

Adding thumbnail images

xceWSYMlxl3ve2gK

The process for adding the the thumbnails to our image carrosell is similar to what we did with the bigger images except:

  • This time we are wrapping all of the elements in a div with a class row and each nested div is going to have a class of column
<div class="row">
  <div class="column">
    <!-- where are img element will go -->
  </div>
</div>
  • This time the <img> element will have three new attributes
    • class with the value of demo cursor
    • alt with a value that will describe what is in the image
    • onclick with the value of currentSlide(1-6)

It will look like this:

    <div class="column">
        <img class="demo cursor" src="imgs/img_woods.jpg" style="width:100%" onclick="currentSlide(1)" alt="The Woods">
    </div>
    <div class="column">
        <img class="demo cursor" src="imgs/img_city.jpg" style="width:100%" onclick="currentSlide(2)" alt="Cinque Terre">
    </div>
    <div class="column">
        <img class="demo cursor" src="imgs/img_mountains.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">
    </div>

After that add this snippet 

 <!-- Next and previous buttons -->
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>

  <!-- Image text -->
  <div class="caption-container">
    <p id="caption"></p>
  </div>

So what does the onclick attribute do?

similar to the way the style tag allows you to use CSS, the onclick attributes triggers javascript code.

dontclicktrim

To try this out by throwing the following snippet into an html file and open it on your desktop 

<!DOCTYPE html>
<html>
  <head>
    <style>
    body {
      text-align: center;
    }
  </style>
  </head>
<body>

<p>What ever you do, DO NOT CLICK THIS BUTTON!!!!</p>

<button onclick="myFunction()">DO NOT CLICK ME</button>

<script>
function myFunction() {
  var x = document.createElement("P");
  var t = document.createTextNode("STOP");
  x.appendChild(t);
  document.body.appendChild(x);
}
</script>

</body>
</html>

Notice how we didn't have to spin up a web-server to do that?

Now what we have onclick doing on our index.html image is a little bit more complicated, but it won't even work if we don't link our Javascript. Remember that <head> tag? Add the two following lines to it.

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

Now write two more files to your project directory one named script.js and the other style.css. This is what our project directory should look like after this.

├── imgs
│   ├── img_city.jpg
│   ├── img_city_wide.jpg
│   ├── img_lights.jpg
│   ├── img_lights_wide.jpg
│   ├── img_mountains.jpg
│   ├── img_mountains_wide.jpg
│   ├── img_nature.jpg
│   ├── img_nature_wide.jpg
│   ├── img_snow.jpg
│   ├── img_snow_wide.jpg
│   ├── img_woods.jpg
│   └── img_woods_wide.jpg
├── index.html
├── script.js
└── style.css

The Javascript

Open up script.js and paste the following code into it 

var slideIndex = 1;
showSlides(slideIndex);

// Next/previous controls
function plusSlides(n) {
  showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
  showSlides(slideIndex = n);
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  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++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}

For the sake of time and because Javascript isn't in the scope of this lesson lets focus on line 10 the currentSlide() function. We have 6 different <img> elements that act as buttons in our index.html file. Each image element when clicked calls the currentSlide() function with an argument n (We hardcoded n with a value of one through six). The function then passes the value of n to the showSlides function which triggers some spaghetti code that that changes the css display value all of our our <div class="mySlides"> to "display: none;" meaning they are hidden from the user. It then uses n to find the slide that the user selected and changes its css value to display: block;meaning it will live on its own line allowing it to be fully visible to the user.

image-20201019191119010

The CSS

Paste the following into style.css

* {
  box-sizing: border-box;
}

/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #222;
  padding: 2px 16px;
  color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  width: 16.66%;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

The CSS syntax is pretty goofy but it mostly consists of a selector, property and value.

image-20201019192143727

If this didn't work for you check out the real source code here

https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp