We Keep Coding

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');"

Multiple line image slider with buttons

I am working on a website that should have image sliders with clickable buttons that flip to the next image.
I was able to make a single slider / page, but as I have no experience in coding yet, I ran into difficulties when I was trying make multiple sliders following each other directly. The buttons of a certain slider started to mix up, and target other sliders too, or only the first one, but not the way I wanted..
So I started copying and repeating the same lines of code and applying them to groups of images separately.
I also want some text to flip together with the images, so I grouped the text and images together with the buttons, and finally I ended up having a lot of repetition, and way too long codes. :-)
Right now it works, but I assume that there is a much easier, solution, that would make my code a lot shorter.
Can someone help me with:
Having one good java script, that doesn't mix up the targets, when having multiple sliders?
Having only one "buttons"/slider instead of copying them to all the "containergrid"s groups, but still flipping the text together with the image?
Thanks, and sorry for the long code. :)
<div class="content">
<!---THE FIRST SLIDER--->
<div class="slider_1">
<div class="slides_1">
<div class="containergrid">
<div class="description">
<p class="maindescription">Description</p>
<p class="year">2017</p>
</div>
<div class="imgbutton">
<img class="img_1_1">
<div class="button">
<button class="prev"
onclick="plusDivs1(-1)"></button>
<button class="next"
onclick="plusDivs1(1)"></button>
</div>
</div>
</div>
</div>
<div class="slides_1">
<div class="containergrid">
<div class="description">
<p class="maindescription">Description</p>
<p class="year">2017</p>
</div>
<div class="imgbutton">
<img class="img_1_2">
<div class="button">
<button class="prev"
onclick="plusDivs1(-1)"></button>
<button class="next"
onclick="plusDivs1(1)"></button>
</div>
</div>
</div>
</div>
</div>
<!---THE SECOND SLIDER--->
<div class="slider_2">
<div class="slides_2">
<div class="containergrid">
<div class="description">
<p class="maindescription">Description</p>
<p class="year">2017</p>
</div>
<div class="imgbutton">
<img class="img_2_1">
<div class="button">
<button class="prev"
onclick="plusDivs1(-1)"></button>
<button class="next"
onclick="plusDivs1(1)"></button>
</div>
</div>
</div>
</div>
<div class="slides_2">
<div class="containergrid">
<div class="description">
<p class="maindescription">Description</p>
<p class="year">2017</p>
</div>
<div class="imgbutton">
<img class="img_2_2">
<div class="button">
<button class="prev"
onclick="plusDivs1(-1)"></button>
<button class="next"
onclick="plusDivs1(1)"></button>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var slideIndex = 1;
showDivs1(slideIndex);
function plusDivs1(n) {
showDivs1(slideIndex += n);
}
function showDivs1(n) {
var i;
var x = document.getElementsByClassName("slides_1");
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 = "flex";
}
</script>
<script>
var slideIndex = 1;
showDivs2(slideIndex);
function plusDivs2(n) {
showDivs2(slideIndex += n);
}
function showDivs2(n) {
var i;
var x = document.getElementsByClassName("slides_2");
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 = "flex";
}
</script>

So you would just have to pass a reference to your slides into the showDivs function, so you can keep the clicks independent of one another. You'd still have to initialize each slider separately.
function plusDivs(slider, n) {
showDivs(slider, slideIndex += n);
}
function showDivs(slider, index) {
var i;
var x = document.getElementsByClassName(slider);
if (index > x.length) {
slideIndex = 1
}
if (index < 1) {
slideIndex = x.length
}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex - 1].style.display = "flex";
}
// Initialize the sliders
var slideIndex = 1;
showDivs('slides_1', slideIndex);
showDivs('slides_2', slideIndex);
In your HTML you just need to pass the reference to the plusDivs function:
onclick="plusDivs('slides_1', 1)"
Here is a fiddle showing a working example

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>

how to code for multiple modals where some of them are carousels with different number of slides

I have a page with several buttons, when each button is clicked a different modal pops up. Some of the modals are carousels, the code I have works but for only one of the carousels, when I have more than one I get extra empty slides on all the carousels. So I'm guessing my code is counting all the slides from all the carousels together. Im trying to have write something where it says if this modal is clicked then get the slides from the clicked modal only but Im struggling with that.
These are the bits of relevant code:
<script>
//Carousel
var slideIndex = 1;
showDivs(slideIndex);
function plusDivs(n) {
showDivs(slideIndex += n);
}
function currentDiv(n) {
showDivs(slideIndex = n);
}
function showDivs(n) {
var i;
var x = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
/*dots[i].className = dots[i].className.replace(" w3-white", "");*/
}
x[slideIndex-1].style.display = "block";
/*dots[slideIndex-1].className += " w3-white";*/
}
</script>
<script>
//Display corresponding modal of letter that is clicked
$(".button").on("click", function() {
var modal = $(this).data("modal");
$(modal).show();
document.body.classList.add("modal-open");
});
//Close modal when "x" is clicked or when area outside modal is clicked
$(".modal").on("click", function(e) {
var className = e.target.className;
if(className === "modal" || className === "close"){
$(this).closest(".modal").hide();
document.body.classList.remove("modal-open");
}
});
</script>
<button class="button" data-modal="#modalOne"><img id="myImg" src=""></button>
<button class="button" data-modal="#modalB"><img id="myImg" src=""></button>
<button class="button" data-modal="#modalC"><img id="myImg" src=""></button>
<!-- The Modal -->
<div id="modalA" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class= "mySlides">
<img class="gif" src="" width="100" height="100" >
<h4>Title</h4>
<p> content </p>
</div>
<div class="mySlides">
<h4 Title</h4>
<p> content </p>
</div>
<div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div>
<div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div>
</div>
</div>
<!-- The Modal B -->
<div id="modalB" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class="mySlides">
<img class="gif" src="" width="100" height="100" >
<h4></h4>
<p></p>
</div>
</div>
</div>
<!-- The Modal C -->
<div id="modalC" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class="mySlides">
<img class="gif" src="" width="100" height="100" >
<h4></h4>
<p></p>
<div class="mySlides">
<h4></h4>
<p></p>
</div>
<div class="w3-left w3-hover-text-khaki" onclick="plusDivs(-1)">❮</div>
<div class="w3-right w3-hover-text-khaki" onclick="plusDivs(1)">❯</div>
</div>
</div>

When you do this line
var x = document.getElementsByClassName("mySlides");
You count all the elements with class name of "mySlides", which is ALL of the slides in the HTML document.
Add code in your button click routine to count the number of slides in the corresponding modal:
Add this at the top of the javascript:
var modal = "modalA";
showDivs(slideIndex, modal);
Change the button click to:
$(".button").on("click", function() {
modal = $(this).data("modal").text();
$("#" + modal).show();
document.body.classList.add("modal-open");
});
Modify your showDivs function to include the new variable:
function showDivs(n, modal) {
var i;
var x = document.getElementById(modal).getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("demo");
if (n > x.length) {slideIndex = 1}
if (n < 1) {slideIndex = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
/*dots[i].className = dots[i].className.replace(" w3-white", "");*/
}
x[slideIndex-1].style.display = "block";
/*dots[slideIndex-1].className += " w3-white";*/
}
Finally, change the data-modal attributes of your buttons to read:
<button class="button" data-modal="modalA">
<button class="button" data-modal="modalB">
<button class="button" data-modal="modalC">
You will also need to update the lines:
function plusDivs(n) {
showDivs(slideIndex += n, modal);
}
function currentDiv(n) {
showDivs(slideIndex = n, modal);
}

Change slider's next and previous button to be previews of upcoming or previous pictures

Hey so i have a slider and i need to change the next and previous button backgrounds to show a preview of the next and previous slide. I don't know if it's possible without jQuery but since i'm working on an all javascript slider i'd very much appreciate a javascript solution
This is the HTML
<body onload="Load()"
<div class="container">
<div class="slider">
<div class="slides" id="slide1">
<img src="img/1.jpg">
</div>
<div class="slides" id="slide2">
<img src="img/2.jpg">
</div>
<div class="slides" id="slide3">
<img src="img/3.jpg">
</div>
</div>
<div class="ctrl">
<div class="prev">
<input type="button" onClick="prev();">
</div>
<div class="next">
<input type="button" onClick="next();">
</div>
</div>
</div>
</body>
And the Javascript
nrSlide=3;
function Load(){
nrShown = 0;
vect = new Array(nrSlide + 1);
vect[0] = document.getElementById("slide1");
vect[0].style.visibility = "visible";
for (var i = 1; i < nrSlide; i++)
{
vect[i] = document.getElementById("slide" + (i+1));
}
}
function next(){
nrShown++;
if(nrShown == nrSlide) {
nrShown=0;
}
Effect();
}
function prev(){
nrShown--;
if(nrShown == -1) {
nrShown = nrSlide -1;
}
Effect();
}
// Effect
function Effect(){
for (var i=0; i < nrSlide; i++){
vect[i].style.opacity = "0";
vect[i].style.visibility = "hidden";
}
vect[nrShown].style.opacity = "1";
vect[nrShown].style.visibility = "visible";
}
PS: I do realize that this is doable in jQuery but i need a javascript solution. And if you are going to downvot at least leave a reason

nrSlide=3;
function Load(){
nrShown = 0;
vect = new Array(nrSlide + 1);
vect[0] = document.getElementById("slide1");
vect[0].style.visibility = "visible";
for (var i = 1; i < nrSlide; i++)
{
vect[i] = document.getElementById("slide" + (i+1));
}
ShowNextPrev(nrShown);
}
function next(){
nrShown++;
if(nrShown == nrSlide) {
nrShown=0;
}
ShowNextPrev(nrShown);
Effect();
}
function prev(){
nrShown--;
if(nrShown == -1) {
nrShown = nrSlide -1;
}
ShowNextPrev(nrShown);
Effect();
}
function ShowNextPrev(nrShown)
{
var nrShown2 = nrShown == nrSlide-1 ? -1 : nrShown;
document.querySelector(".next").querySelector("input").style.backgroundImage = "url("+document.querySelector(".slider").querySelectorAll("img")[nrShown2+1].src+")";
document.querySelector(".next").querySelector("input").style.backgroundSize = "contain";
var nrShown3 = nrShown == 0 ? nrSlide : nrShown;
document.querySelector(".prev").querySelector("input").style.backgroundImage = "url("+document.querySelector(".slider").querySelectorAll("img")[nrShown3-1].src+")";
document.querySelector(".prev").querySelector("input").style.backgroundSize = "contain";
}
// Effect
function Effect(){
for (var i=0; i < nrSlide; i++){
vect[i].style.opacity = "0";
vect[i].style.visibility = "hidden";
}
vect[nrShown].style.opacity = "1";
vect[nrShown].style.visibility = "visible";
}
Load();
.ctrl > div {
display: inline-block;
}
.slides > img {
height: 40px;
}
<div class="slider">
<div class="ctrl">
<div class="prev">
<input type="button" onClick="prev();">
</div>
<div class="next">
<input type="button" onClick="next();">
</div>
</div>
<div class="slides" id="slide1">
<img src="https://lh6.googleusercontent.com/-Ze9FLpwZjdE/AAAAAAAAAAI/AAAAAAAAAA8/YOtXVkTZpNs/photo.jpg">
</div>
<div class="slides" id="slide2">
<img src="http://icons.iconarchive.com/icons/femfoyou/angry-birds/256/angry-bird-green-icon.png">
</div>
<div class="slides" id="slide3">
<img src="http://icons.iconarchive.com/icons/femfoyou/angry-birds/256/angry-bird-black-icon.png">
</div>
</div>
</div>
This approach should do it. In plain JavaScript using querySelector() and querySelectorAll. You just need the code. The CSS and HTML are just altered to make it work for the example.