Jump to content

JavaScript, Zoom in images . Please help noobie .


Alex_Undr_P
 Share

Recommended Posts

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 


 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...