-1

I want to display a full screen pop up once you click on any of the thumbnail images in my gallery.

If i click on any of the thumbnails i have in my gallery, the full screen version of the image will not pop up. The only way it works is if i add [0] after the getElementsByTagName("img"), but only if i click on the first image.

    var image = gallery.getElementsByTagName("img");
    image.onclick = function() {
        launchFullscreen(image);
        image.style.filter = "none";
    }
anas_429
  • 11
  • 1
  • 2
    Hi! :) I think you should reformulate your question to be more specific, otherwise you will probably get downvoted pretty quickly here. What have you tried so far, and what exactly is the problem? – Fii Sep 19 '19 at 20:29
  • Possible duplicate of [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) – AuxTaco Sep 19 '19 at 21:07

1 Answers1

0

If i click on any of the thumbnails i have in my gallery, the full screen version of the image will not pop up. The only way it works is if i add [0] after the getElementsByTagName("img"), but only if i click on the first image.

The problem is that gallery.getElementsByTagName("img") returns a list of all img-elements in gallery. Ẁhen you add the [0], you select the first element from that list.

Instead, you need to apply the onclick handler function to all elements in that list:

var images = gallery.getElementsByTagName("img");

for (var i = 0; i < images.length; i++) {

    images[i].onclick = function() {
        // ...
    }
}

How to launch Fullscreen:
You can use the Fullscreen API in your JavaScript to make elements fullscreen.
Just call this (for an element called foo):

foo.requestFullscreen();

Here is a simple demo: https://jsfiddle.net/9ytq2dr4/ (Edit: Corrected link)

What I would do is design an initially invisible <div> that can be displayed fullscreen and contain the full sized image. In the onclick event of an image in the gallery, you would need to load the full sized version of the clicked image into that div and make it visible and fullscreen.

Fii
  • 190
  • 13