JavaScript, Zoom in images . Please help noobie .

[Alex_Undr_P]

Hello there, i just started exploring HTML CSS and JS . And have a problem , im sure it's easy but can't find any resources to resolve it , and probably have some mess in there . 

Ill have on webpage 6 images in each row, and i want to make them modal , and be able to open each of them separate and also clicking next button as well to move to next one till 6th  at the end . 

i tried to increase variable , wich will change numbers to all elements that i need for function , but for some reason it doesnt work . To simplify my problem i made example just for 1 pic and with i++;
Everything working perfectly for first picture.

html

<div class="row">
        <div class= "col-2">
            
            <img id="ex1"src="images/IMG-1483.png" alt="damage" />
            <div id="exmodal1" class="modal">
                <span class="close">&times;</span>
                <span class="next">&#8250;</span>
                <img class="modal-content" id="img1">
            <div id="caption1"></div>
            
            </div>
        </div>
        <div class= "col-2">
            <img id="ex2"src="images/IMG-1486.jpg" />
            <div id="exmodal2" class="modal">
                <span class="close">&times;</span>
                <span class="next">&#8250;</span>
                <img class="modal-content" id="img2">
            <div id="caption2"></div>
        
            </div>

 

script

var i = 1;
       var modal = document.getElementById ("exmodal"+i);
       var img = document.getElementById("ex"+i);
       var modalImg = document.getElementById("img"+i);
       var captionText = document.getElementById("caption"+i);
     
       img.onclick = function a(){
            modal.style.display = "block";
            modalImg.src = this.src;
            captionText.innerHTML = this.alt;
            
        }
     
        var span = document.getElementsByClassName ("close")[0];
        span.onclick = function b() {
            modal.style.display = "none";
            }
        i++; //isn't it changing upper vars to "exmodal2" "ex2" ... etc. if it is the same function below should work but itdoesnt!     
        img.onclick = function a(){
            modal.style.display = "block";
            modalImg.src = this.src;
            captionText.innerHTML = this.alt;}
        span.onclick = function b() {
            modal.style.display = "none";
            }

siding.html

[justsomeguy]

isn't it changing upper vars to "exmodal2" "ex2" ... etc.

No, changing that variable does not change any other variables.  You need to do that yourself.  You should probably just use a loop to loop through however many pictures you have.  The first step is getting all of the relevant elements for that picture.

[Alex_Undr_P]

That's what i started doing. And finish it up (but i++; before every function to show modal ectually worked, and it changed the value of every variable)  i didn't use the loop  but i reenter vars after every i++; and it's worked. But it looks so dumb to me to making it separate for every img that i have . You saying that there no way to make it in short code for all images thru js only? May be some x var = new array [0,1,2,3,4,5], and if x= one of the elements of array then run function b ();

Thank you for reply by the way. 

here the website you can check it out : alexandyana.net 

 

[dsonesuk]

You either have to use a anonymous function

        span.onclick = function() {
            modal.style.display = "none";
            } 

Or create a function a(), function b() to call on a click event

span.onclick = a;

function a(){
            modal.style.display = "none";
            } 

its not practical to bind a single named function to a single click event.