Online Slideshow

OK! Today for work I have been tasked to make a simple slideshow that will show each slide for about 9 seconds and will refresh regularly. The goal is to use this webpage to project onto the monitors at our church and regularly broadcast important information as well as a friendly greeting.

Simple enough. Just about a dozen steps to put together. Let’s do it.

Step 1

I began by making a quick website, so for me that typically means a new folder with an images folder, a new index.html, style.css, and script.js. We WILL be using JavaScript and Jquery for this simple set up. I also had to find the images I was going to use and place those in the images folder. Done!

Step 2

I made sure my site worked/linked correctly. That means I need a link to my stylesheet, my javascript file, and the jquery library. I also added the 3 sample photos I was using and made sure that the addresses for each was accurate (remember to start address assuming you’re not yet in the correct folder /hs/slideshow/images as opposed to /images/slideshow.png, etc <–yes, that’s a note specifically for me!).

A new thing that I also added was a meta tag which asks the page to refresh every 70 seconds

<meta http-equiv=”.mySlides {
display:none;
}refresh” content=”70″>

Step 3

$(document).ready(function(){
var slideIndex = 0;
carousel();

function carousel() {
var i;
var x = document.getElementsByClassName(“mySlides”);
for (i = 0; i < x.length; i++) {
x[i].style.display = “none”;
}
slideIndex++;
if (slideIndex > x.length) {slideIndex = 1}
x[slideIndex-1].style.display = “block”;
setTimeout(carousel, 9000); // Change image every 9 seconds?
}
});

This is the jquery code I am using to create my slide show. So it will figure out how many images there are, rotate through each showing them for 9 seconds, and then do it again! For this to work I also had to add the class mySlides to my images:

<img class=”mySlides” src=”/hs/slideshow/images/slideshow01.png” width=80%>

Like so and I also added this attribute in the stylesheet

.mySlides {.mySlides { display:none;}

Since I don’t want them displayed until the code decides it’s the photos turn in the slideshow.

 

I hope that made a little bit of sense! I’m going to look into how to display my code on the page better because right now, I don’t like to include too much code because it just looks messy! I’ll work on it!

Happy coding!

No comments

Leave a Comment

Your email address will not be published. Required fields are marked *