Issue
I am currently implementing Fullscreen API for a 12 image long gallery. I'm very new to using javascript but time is of the essence here as it is for a college project due on monday and it is only one of the several requirements for it that I've yet to fullfil. Is there a way to have a function activating onclick that applies specifically to the clicked on object not a set Id or do I have to repeat the same function 12 times with different Ids?
<script>
var elem = document.getElementById("image1");
function openFullscreen() {
if (image1.requestFullscreen) {
image1.requestFullscreen();
} else if (image1.webkitRequestFullscreen) {
image1.webkitRequestFullscreen();
} else if (image1.msRequestFullscreen) {
image1.msRequestFullscreen();
}
}
</script>
thanks for any and all advice
Solution
Give the same class to all element you need to select:
<img class="img" src="..."/>
<img class="img" src="..."/>
<img class="img" src="..."/>
...
In js with document.querySelectorAll:
const images = document.querySelectorAll(".img");
images.forEach((image) =>
image.addEventListener("click", () => openFullscreen(image))
);
function openFullscreen(image) {
if (image.requestFullscreen) {
image.requestFullscreen();
} else if (image1.webkitRequestFullscreen) {
image.webkitRequestFullscreen();
} else if (image1.msRequestFullscreen) {
image.msRequestFullscreen();
}
}
Answered By - moonwave99
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.