Alex_Undr_P
-
Posts
2 -
Joined
-
Last visited
Content Type
Profiles
Forums
Events
Posts posted by 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">×</span>
<span class="next">›</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">×</span>
<span class="next">›</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";
}
JavaScript, Zoom in images . Please help noobie .
in JavaScript
Posted
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