Automatic Cycling Carousel for several divs and different img - javascript

I am trying to write a function, that will automatically carousel cycle through img thumbs on my site with 12 different sets of images, which are just put together in one div. The javascript below works, but only as long, as I have the same amount of images in every div. I am also sure, that I took the long route of telling javascript, what to do in terms of variables so my question is, what should I change, so that I can have different amounts of img in my separate divs?
Thanks a lot for any tips!
var myIndex = 0;
carousel();
function carousel() {
var i;
var u = document.getElementsByClassName("thumbs1");
var v = document.getElementsByClassName("thumbs2");
var w = document.getElementsByClassName("thumbs3");
// and so on ...
for (i = 0; i < w.length; i++) {
u[i].style.display = "none";
v[i].style.display = "none";
w[i].style.display = "none";
// ...
}
myIndex++;
if (myIndex > w.length) {myIndex = 1}
u[myIndex-1].style.display = "inline-block";
v[myIndex-1].style.display = "inline-block";
w[myIndex-1].style.display = "inline-block";
// ...
setTimeout(carousel, 1200); // Change image every 2 seconds
}
<div class="imageholder">
<img class="thumbs1" src="image11.jpg">
<img class="thumbs1" src="image12.jpg">
<img class="thumbs1" src="image13.jpg">
<img class="thumbs1" src="image14.jpg">
</div>
<div class="imageholder">
<img class="thumbs2" src="image21.jpg">
<img class="thumbs2" src="image22.jpg">
<img class="thumbs2" src="image23.jpg">
</div>
<div class="imageholder">
<img class="thumbs3" src="image31.jpg">
<img class="thumbs3" src="image32.jpg">
<img class="thumbs3" src="image33.jpg">
<img class="thumbs3" src="image34.jpg">
<img class="thumbs3" src="image35.jpg">
</div>
<!-- ... -->

Keep counting the myIndex (so do not reset it) and use the modulus % operator with the array length of each image set.
Further notes:
The value of Timeout/Interval is in milliseconds. So 2000ms = 2s
You do not need to get all elements' references again with each call to carousel(). Just do it once at the beginning.
If something is not clear, please ask.
var myIndex = 0;
var i;
var u = document.getElementsByClassName("thumbs1");
var v = document.getElementsByClassName("thumbs2");
var w = document.getElementsByClassName("thumbs3");
var allThumbs = [u, v, w];
var myInterval = setInterval(carousel, 2000); // Change image every 2 seconds
function carousel() {
myIndex++;
for (i = 0; i < allThumbs.length; i++) {
allThumbs[i][(myIndex - 1) % allThumbs[i].length].style.display = "none";
allThumbs[i][myIndex % allThumbs[i].length].style.display = "inline-block";
}
}
.thumbs1:not(:first-child),
.thumbs2:not(:first-child),
.thumbs3:not(:first-child) {
display: none;
}
<div class="imageholder">
<img class="thumbs1" src="image11.jpg" alt="1">
<img class="thumbs1" src="image12.jpg" alt="2">
<img class="thumbs1" src="image13.jpg" alt="3">
<img class="thumbs1" src="image14.jpg" alt="4">
</div>
<div class="imageholder">
<img class="thumbs2" src="image21.jpg" alt="1">
<img class="thumbs2" src="image22.jpg" alt="2">
<img class="thumbs2" src="image23.jpg" alt="3">
</div>
<div class="imageholder">
<img class="thumbs3" src="image31.jpg" alt="1">
<img class="thumbs3" src="image32.jpg" alt="2">
<img class="thumbs3" src="image33.jpg" alt="3">
<img class="thumbs3" src="image34.jpg" alt="4">
<img class="thumbs3" src="image35.jpg" alt="5">
</div>

Related

Trouble with JavaScript based photo gallery

I'm attempting to adapt the HTML, CSS, an JavaScript from here: https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp
The problem I'm having is I would like to have all the JavaScript in the JS file and none be in the html.
When I try to move the onclick out of the HTML and into the JS file I have had nothing but problems. Beginning with the DOM not being loaded(solved with a domLoaded function) then to a problem with event listeners for the individual pictures.
My current problem is that the slides in the showSlides function is undefined if I pass the number 1 through it, either as you see in the document.querySelector or if I call the currentSlides or showSlides function in the console.
//waits for the DOM to load so that everything is ready for the gallery code.
window.addEventListener("DOMContentLoaded", domLoaded);
function domLoaded() {
showSlides(slideIndex);
}
document.querySelector("#img1").addEventListener("click", currentSlide.bind(1));
document.querySelector("#img2").addEventListener("click", currentSlide.bind(2));
document.querySelector("#img3").addEventListener("click", currentSlide.bind(3));
document.querySelector('#img4').addEventListener("click", currentSlide.bind(4));
document.querySelector('#img5').addEventListener("click", currentSlide.bind(5));
document.querySelector('#img6').addEventListener("click", currentSlide.bind(6));
//Begin w3schools gallery code
var slideIndex = 1;
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
console.log("click working")
let i;
var slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("demo");
let 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;
}
<div class="container">
<!-- Full-width images with number text -->
<div class="mySlides">
<div class="numbertext">1 / 6</div>
<img class="mainImage" src="assets/dancingSnow.jpg">
</div>
<div class="mySlides">
<div class="numbertext">2 / 6</div>
<img class="mainImage" src="assets/CABELL CO TOURNEY 2016.jpg">
</div>
<div class="mySlides">
<div class="numbertext">3 / 6</div>
<img class="mainImage" src="assets/IMG_9320.JPG">
</div>
<div class="mySlides">
<div class="numbertext">4 / 6</div>
<img class="mainImage" src="assets/Invitation.jpg">
</div>
<div class="mySlides">
<div class="numbertext">5 / 6</div>
<img class="mainImage" src="assets/SCAbattleline.jpg">
</div>
<div class="mySlides">
<div class="numbertext">6 / 6</div>
<img class="mainImage" src="assets/Yorick Paragon Druid.jpg">
</div>
<!-- Next and previous buttons -->
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
<!-- Image text -->
<div class="caption-container">
<p id="caption"></p>
</div>
<!-- Thumbnail images -->
<div class="row">
<div class="column">
<img class="demo" src="assets/dancingSnow.jpg" id="img1" alt="Dancing in the Snow">
</div>
<div class="column">
<img class="demo" src="assets/CABELL CO TOURNEY 2016.jpg" id="img2" alt="Cabell Co Tourney 2016">
</div>
<div class="column">
<img class="demo" src="assets/IMG_9320.JPG" id="img3" alt="unknown">
</div>
<div class="column">
<img class="demo" src="assets/Invitation.jpg" id="img4" alt="Invitation">
</div>
<div class="column">
<img class="demo" src="assets/SCAbattleline.jpg" id="img5" alt="Ready for War">
</div>
<div class="column">
<img class="demo" src="assets/Yorick Paragon Druid.jpg" id="img6" alt="Amtgard Award">
</div>
</div>
</div>
Any input is much appreciated.
With your bind solution, plusSlides function works incorrectly. If you put console.log(n) inside you'll see that n is not a number but rather [object PointerEvent], and so your slideIndex gets messed up and breaks showSlides function. The first argument of bind is usually the this pointer and you have to offset your desired arguments by one. You can pass null as the first argument, like this:
document.querySelector("#img1").addEventListener("click", currentSlide.bind(null,1));
Here is a working example:
https://jsfiddle.net/progmars/njwo0ct7/
However, it could be so much cleaner with jQuery and better model separation from view.

How can I reset my html image gallery to start with first image after leaving it?

I have a website with multiple image galleries on different parts of the website. When you click on the image of specific gallery it changes to next one of that gallery and so on.
What I am trying to achieve is to reset the previous gallery to image 1 when you start clicking on a different gallery. So when the user goes back to the previous gallery, it would start from the first image.
Code used for the galleries:
let projectIndexes = {
project1: 1,
project2: 1,
}
showDivs("project1", projectIndexes.project1);
showDivs("project2", projectIndexes.project2);
function plusDivs(project, n) {
showDivs(project, projectIndexes[project] += n);
}
function showDivs(project, index) {
let i;
let x = document.getElementById(project).getElementsByClassName("slidess");
if (index > x.length) { index = 1 }
if (index < 1) { index = x.length }
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[index - 1].style.display = "block";
projectIndexes[project] = index;
let elements = document.getElementById(project).querySelector('.imgslide').children;
let imgNames = [];
for (let i = 0; i < elements.length; i++) {
imgNames.push(elements[i].children[0].children[0].alt);
}
}
<div class="slide">
<div class="slide-content">
<div class="nextt" onclick="plusDivs('project1', 1)"></div>
</div>
<div class="image-container container prjct">
<div class="projects" id="project1">
<div class="imgslide noselect">
<div class="content-container slidess">
<div class="style-3 style-3-left">
<img class="imageName" alt="Img" src="">
</div>
<div class="style-3 style-3-middle">
<img class="imageName" alt="Img" src="">
</div>
<div class="style-3 style-3-right">
<img class="imageName" alt="Img" src="">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="slide">
<div class="slide-content">
<div class="nextt" onclick="plusDivs('project2', 1)"></div>
</div>
<div class="image-container container prjct">
<div class="projects" id="project2">
<div class="imgslide noselect">
<div class="content-container slidess">
<div class="style-3 style-3-left">
<img class="imageName" alt="Img" src="">
</div>
<div class="style-3 style-3-middle">
<img class="imageName" alt="Img" src="">
</div>
<div class="style-3 style-3-right">
<img class="imageName" alt="Img" src="">
</div>
</div>
<!-- <div class="img-name"></div> -->
</div>
</div>
</div>
</div>
I know a way to force show the first element, but it turns out it does that for all projects.
What I was not able to find is a way to recognise when clicking on a new project, that the previous and only previous project needs to reset to first image.
I have been struggling with this for a while now and cannot make it work, so any help would be highly appreciated. And if something is not clear, let me know and I will clarify things.
If I'm following you correctly, the following should do it.
function resetPriorGalleries(currentProject) {
var projectDivs = document.getElementsByClassName("projects");
for (let i = 0; i < projectDivs.length; i++) {
if (projectDivs[i].id === currentProject)
return;
showDivs(projectDivs[1].id, 1);
}
}
The best place to call it would probably be in the onclicks.
onclick="plusDivs('project2', 1); resetPriorGalleries('project2');"

How can I make a reusable function?

I am trying to apply this function to multiple projects and I want to not repeat it. How can I do it in Vanilla JS? See the code below.
let slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function showDivs(n) {
let i;
let x = document.getElementsByClassName("slides");
if (n > x.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "block";
document.getElementsByClassName("pagination")[0].innerText = slideIndex + ' / ' + x.length;
}
<div class="project1">
<div class="pagination"></div>
<div class="imgslide noselect">
<div class="prev" onclick="plusDivs(-1)"></div>
<div class="next" onclick="plusDivs(1)"></div>
<img class="slides" src="img/project-1/Scan-4.jpg">
<!-- <img class="slides" src="img/Scan-8.jpg"> -->
<img class="slides" src="img/project-1/Scan-24.jpg">
<img class="slides" src="img/project-1/Scan-35.jpg">
<img class="slides" src="img/project-1/Scan-39.jpg">
<img class="slides" src="img/project-1/Scan-40.jpg">
</div>
</div>
<div class="project2">
<div class="pagination"></div>
<div class="imgslide noselect">
<div class="prev" onclick="plusDivs(-1)"></div>
<div class="next" onclick="plusDivs(1)"></div>
<img class="slides" src="img/project-1/Scan-41.jpg">
<!-- <img class="slides" src="img/Scan-8.jpg"> -->
<img class="slides" src="img/project-1/Scan-22.jpg">
<img class="slides" src="img/project-1/Scan-33.jpg">
<img class="slides" src="img/project-1/Scan-38.jpg">
<img class="slides" src="img/project-1/Scan-49.jpg">
</div>
</div>
Divs with class project1 and project2 should be separated and the function simply changes image once clicked. I want to apply the same function for multiple projects without re-writing it every time.
Instead of getting all the slides document.getElementsByClassName("slides") you should get the slides of the appropriate project document.getElementById("projectN").getElementsByClassName("slides"). You'll have to change both functions to accept another parameter for specifying the project.
let projectIndexes = {
project1: 1,
project2: 1
}
showDivs("project1", projectIndexes.project1);
showDivs("project2", projectIndexes.project2);
function plusDivs(project, n) {
showDivs(project, projectIndexes[project] += n);
}
function showDivs(project, index) {
let i;
let x = document.getElementById(project).getElementsByClassName("slides");
if (index > x.length) { index = 1 }
if (index < 1) { index = x.length }
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[index - 1].style.display = "block";
document.getElementById(project).getElementsByClassName("pagination")[0].innerText = index + ' / ' + x.length;
projectIndexes[project] = index;
}
.slides {
display: none;
}
<div id="project1">
<div class="pagination"></div>
<div class="imgslide noselect">
<button class="prev" onclick="plusDivs('project1', -1)">Previous</button>
<button class="next" onclick="plusDivs('project1', 1)">Next</button>
<img class="slides" src="img/project-1/Scan-4.jpg" alt="project1 slide1">
<img class="slides" src="img/project-1/Scan-24.jpg" alt="project1 slide2">
<img class="slides" src="img/project-1/Scan-35.jpg" alt="project1 slide3">
<img class="slides" src="img/project-1/Scan-39.jpg" alt="project1 slide4">
<img class="slides" src="img/project-1/Scan-40.jpg" alt="project1 slide5">
</div>
</div>
<br />
<div id="project2">
<div class="pagination"></div>
<div class="imgslide noselect">
<button class="prev" onclick="plusDivs('project2', -1)">Previous</button>
<button class="next" onclick="plusDivs('project2', 1)">Next</button>
<img class="slides" src="img/project-1/Scan-41.jpg" alt="project2 slide1">
<img class="slides" src="img/project-1/Scan-22.jpg" alt="project2 slide2">
<img class="slides" src="img/project-1/Scan-33.jpg" alt="project2 slide3">
<img class="slides" src="img/project-1/Scan-38.jpg" alt="project2 slide4">
<img class="slides" src="img/project-1/Scan-49.jpg" alt="project2 slide5">
</div>
</div>
I see you have a good answer but I am adding this as an alternative.
I would suggest using a class for a more generic selector to the parent then use that. Note I also added the option here to set a predefined displayed image by using the data-slide-index attribute, then set that to the value of the currently selected image. If that were saved to a cookie for example, you could restore from that also.
You could remove the project1 and project2 classes if you wanted to.
I also used data-direction so that I could remove the click handler from the markup and not really care which button was clicked.
a bit cleaner markup without the event, making it more generic there without the group name need
restore the last viewed/first to view (with cookie addition or from back-end)
used a hidden class and toggled that for the show/hide
used a 0 based internally numbers as arrays are 0 based and makes coding simpler to maintain but added 1 for the display for normal people.
importantly, NO use of global variables
(function setup() {
// add event listener to buttons
let els = document.getElementsByClassName("project-container");
for (let i = 0; i < els.length; i++) {
let prevnext = els[i].getElementsByClassName("prevnext");
for (let p = 0; p < prevnext.length; p++) {
prevnext[p].addEventListener("click", plusMinusDivs, false);
}
//hide/show for each group, avoid this call by adding classes to markup
showImage(els[i]);
}
})();
function plusMinusDivs() {
let parent = this.closest(".project-container");
let slider = this.closest(".imgslide");
let slideIndex = slider.dataset.slideIndex * 1;
let nd = this.dataset.direction * 1;//*1 to avoid parse
slideIndex = slideIndex += nd;
let slides = parent.querySelectorAll(".slides");
if (slideIndex >= slides.length) {
slideIndex = 0;
}
if (slideIndex < 0) {
slideIndex = slides.length - 1;
}
slider.dataset.slideIndex = slideIndex + "";
showImage(parent);
}
function showImage(parent) {
let slides = parent.querySelectorAll(".slides");
let len = slides.length;
for (let s = 0; s < len; s++) {
slides[s].classList.toggle("hidden", true);
}
let slider = parent.querySelector(".imgslide");
let slideIndex = slider.dataset.slideIndex * 1;//*1 to avoid parse
slides[slideIndex].classList.toggle("hidden", false);
let pageText = (slideIndex + 1) + ' / ' + len;
parent.querySelector(".pagination").innerText = pageText;
}
.hidden {
display: none;
}
.prevnext {
background-color: #AAEEDD;
}
<div class="project-container project1">
<div class="pagination"> </div>
<div class="imgslide noselect" data-slide-index="0">
<button class="prevnext prev" data-direction="-1"><<</button>
<button class="prevnext next" data-direction="1">>></button>
<img class="slides" src="img/project-1/Scan-4.jpg" alt="4" />
<img class="slides" src="img/project-1/Scan-24.jpg" alt="24" />
<img class="slides" src="img/project-1/Scan-35.jpg" alt="35" />
<img class="slides" src="img/project-1/Scan-39.jpg" alt="39" />
<img class="slides" src="img/project-1/Scan-40.jpg" alt="40" />
</div>
</div>
<div class="project-container project2">
<div class="pagination"> </div>
<div class="imgslide noselect" data-slide-index="3">
<button class="prevnext prev" data-direction="-1"><<</button>
<button class="prevnext next" data-direction="1">>></button>
<img class="slides" src="img/project-1/Scan-41.jpg" alt="2-41" />
<img class="slides" src="img/project-1/Scan-22.jpg" alt="2-42" />
<img class="slides" src="img/project-1/Scan-33.jpg" alt="2-33" />
<img class="slides" src="img/project-1/Scan-38.jpg" alt="2-38" />
<img class="slides" src="img/project-1/Scan-49.jpg" alt="2-49" />
</div>
</div>

Several slideshows on one page

I have read threads asking the same question but I can not find information thats relevant for the functions I am using
I have made an automatic slideshow in HTML CSS and JS. This works perfectly, but it does not work on two slideshows at the same time.
The JS: I tried a couple of different things, lastly I tried to make two independent functions for the two slideshows. This does not work either
//Necessary variables
var images = [];
var i = 0;
var time = 2000;
// List of pics
images[0] = "images/nighttime.png";
images[1] = "images/natur.png";
images[2] = "images/shark_1.png";
images[3] = "images/shark_2.jpg";
function autoSlide () {
document.slide.src = images[i];
if (i < images.length-1) {
i++;
}
else {
i = 0;
}
setTimeout("autoSlide()", time);
}
window.onload = autoSlide;
/* Slideshow 2 */
// Necessary variables
var images_one = [];
var j = 0;
// List of pics
images_one[0] = "images/innredning_1.png";
images_one[1] = "images/innredning_2.png";
images_one[2] = "images/innredning_bad.jpg";
function autoSlide_box2 () {
document.slide.src = images_one[i];
if (j < images_one.length-1) {
j++;
}
else {
j = 0;
}
setTimeout("autoSlide()_box2", time);
}
window.onload = autoSlide_box2;
The HTML: The overlay__content is for the function openNav(), it should not have anything to do with the slideshow function
<section class="index-content">
<!-- Denne containeren viser frem bildene. Skifter automatisk-->
<div class="container">
<figure id="slideshow" onclick="openNav()">
<img src="images/nighttime.png" name="slide" class="pictures">
</figure>
</div>
<!-- Denne div'en og alt inni den er usynlig. Kommer frem når man trykker på bildet. Forhåpentligvis-->
<div id="nav" class="overlay">
<div class="overlay__content1">
×
<div class="mySlides fade">
<img src="images/nighttime.png">
</div>
<div class="mySlides fade">
<img src="images/natur.png">
</div>
<div class="mySlides fade">
<img src="images/shark_1.png">
</div>
<div class="mySlides fade" id="threenfour">
<img src="images/shark_2.jpg">
</div>
</div>
</div>
</section>
<section class="index-content2">
<div class="containerLeft">
<figure id="slideshow" onclick="openNav()">
<img src="images/innredning_1.png" name="slide" class="pictures">
</figure>
</div>
<!-- Denne div'en og alt inni den er usynlig. Kommer frem når man trykker på bildet. Forhåpentligvis-->
<div id="nav" class="overlay">
<div class="overlay__content2">
<div class="mySlides fade">
<img src="images/innredning_1.png">
</div>
<div class="mySlides fade">
<img src="images/innredning_2.png">
</div>
<div class="mySlides fade">
<img src="images/innredning_bad.jpgw">
</div>
</div>
</div>
</section>
I don't know exactly, but i think you are adressing the same slide within your functions:
document.slide.src = images[i];
and
document.slide.src = images_one[i];
maybe you need to try to give your images ids, like proposed in this answer by NewToJS
I found the answer. I had to change the function so it would change the pictures of every slideshow on the page.
function autoSlide () {
// Sliding the images
document.slide.src = images[i];
document.slide1.src = images_one[j];
document.slide2.src = images_two[k];
// Variables reset after going through the array
if (i < images.length-1) {i++;}
else {i = 0;}
if (j < images_one.length-1) {j++;}
else {j = 0;}
if (k < images_two.length-1) {k++;}
else {k = 0;}
setTimeout("autoSlide()", time);
}

Changing all images on timer with JS

I have this 3x3 img gallery. I need all of them to change every certain time with JS.
So far I managed to do this to one of the images. I don't know how to target them all.
<script>
var images = ["http://lorempixel.com/250/200/", "http://lorempixel.com/250/150/"];
var i = 0;
var renew = setInterval(function(){
if(images.length == i){
i = 0;
}
else {
document.getElementByClassName('galleryItem').src = images[i];
i++;
}
},1000);
</script>
<div class="galleryWrapper">
<div class="galleryItem item1">
<img id="image1" src="http://lorempixel.com/250/200/" alt="picture1">
</div>
<div class="galleryItem item2">
<img id="image2" src="http://lorempixel.com/250/200/" alt="picture2">
</div>
<div class="galleryItem item3">
<img id="image3" src="http://lorempixel.com/250/200/" alt="picture3">
</div>
<div class="galleryItem item4">
<img id="image4" src="http://lorempixel.com/250/200/" alt="picture4">
</div>
<div class="galleryItem item5">
<img id="image5" src="http://lorempixel.com/250/200/" alt="picture5">
</div>
<div class="galleryItem item6">
<img id="image6" src="http://lorempixel.com/250/200/" alt="picture6">
</div>
<div class="galleryItem item7">
<img id="image7" src="http://lorempixel.com/250/200/" alt="picture7">
</div>
<div class="galleryItem item8">
<img id="image8" src="http://lorempixel.com/250/200/" alt="picture8">
</div>
<div class="galleryItem item9">
<img id="image9" src="http://lorempixel.com/250/200/" alt="picture9">
</div>
</div>
I don't know JS at all so don't be too harsh.
Thanks in advance.
Remove the onload from your body element (Using DOMContentLoaded event instead it is less intrusive).
var imageList = ["http://lorempixel.com/250/200/", "http://lorempixel.com/250/150/"],
imageListCounter = 0,
imageEls;
function swapImages() {
var i = 0, len = imageEls.length;
for (i = 0; i < len; i++) {
imageEls[i].src = imageList[imageListCounter];
}
imageListCounter++;
if (imageListCounter > imageList.length - 1) {
imageListCounter = 0;
}
}
document.addEventListener('DOMContentLoaded', function(event) {
imageEls = document.querySelectorAll('.galleryItem img');
setInterval(swapImages, 1000);
});
What we are doing here is:
on document ready store all the image elements in imageEls
then start a timer, calling swapImages every 1 second
swapImages iterates over images and changes the .src to what is in the next one in imageList
when the imageListCounter reaches the end of imageList it resets to 0
So the complete html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Gallery</title>
<link rel="stylesheet" href="style.css">
<script>
var imageList = ["http://lorempixel.com/250/200/", "http://lorempixel.com/250/150/"],
imageListCounter = 0,
imageEls;
function swapImages() {
var i = 0, len = imageEls.length;
for (i = 0; i < len; i++) {
imageEls[i].src = imageList[imageListCounter];
}
imageListCounter++;
if (imageListCounter > imageList.length - 1) {
imageListCounter = 0;
}
}
document.addEventListener('DOMContentLoaded', function(event) {
imageEls = document.querySelectorAll('.galleryItem img');
setInterval(swapImages, 1000);
});
</script>
</head>
<body>
<div class="galleryWrapper">
<div class="galleryItem item1">
<img src="http://lorempixel.com/250/200/" alt="picture1">
</div>
<div class="galleryItem item2">
<img src="http://lorempixel.com/250/200/" alt="picture2">
</div>
<div class="galleryItem item3">
<img src="http://lorempixel.com/250/200/" alt="picture3">
</div>
<div class="galleryItem item4">
<img src="http://lorempixel.com/250/200/" alt="picture4">
</div>
<div class="galleryItem item5">
<img src="http://lorempixel.com/250/200/" alt="picture5">
</div>
<div class="galleryItem item6">
<img src="http://lorempixel.com/250/200/" alt="picture6">
</div>
<div class="galleryItem item7">
<img src="http://lorempixel.com/250/200/" alt="picture7">
</div>
<div class="galleryItem item8">
<img src="http://lorempixel.com/250/200/" alt="picture8">
</div>
<div class="galleryItem item9">
<img src="http://lorempixel.com/250/200/" alt="picture9">
</div>
</div>
</body>
</html>
Where you set the image name to image1, you can just change to 'image'+i+''
document.getElementById('image'+i+'').src = images[i];
for (var e = 1; e < 10; e++)
{
var ImgID = 'image' + e;
document.getElementById(ImgID).src = images[i];
}
If you were using jquery you could just do a foreach on all the img elements. but the above will work. if you have 9 images with the ID of image1, image2, image3... you get the idea.
write this code in your else block
var imgs = document.getElementsByTagName('img');
for(j=0;j<imgs.length;j++){
imgs[j].src = images[i];
}
i++;
instead of this
document.getElementByClassName('gallery').src = images[i];
i++;
Give all your images a class attribute with the same value.
assuming you use the value "imagetags", replace your document.getElementById() line with the following:
var elements = document.GetElementsByClassName("imagetags");
for (var elem in elements){
elements[elem].src = images[i];
}

Categories