Additional menu

CodingWithDrew

A Web and App Development Portfolio

You are here: Home / Javascript / Creating A Gallery

Creating A Gallery

Today we are going to learn about creating reusable code to create a gallery project.

Let's begin with creating a closure - the ability to create a function that has scope. More on that here.

What we are going to create is very similar to a plugin:

function Gallery (gallery){ //will have scope
        const buttons = gallery.querySelectorAll('button');
        function showNextImage(){
        //click handlers and event listeners
        };
};

In the example above we can use this to create a function with a function inside it, the function within will still be accessible even though the outer function has run. Let's put this into play.

At the very end we want to use it on the end of the page. In the HTML you will find that there is gallery1 and gallery2, we are going to go ahead and create variable to select these.

function Gallery (gallery){ 
   console.log(Gallery);
   if(!gallery){
       throw new Error('No Gallery Found!');
   };
};

//USE IT ON THE PAGE

const gallery1 = Gallery(document.querySelector('.gallery1'));
const gallery2 = Gallery(document.querySelector('.gallery2'));

Previously, we selected the items at the beginning of the file. Here we are going to scope these selectors inside the Gallery function.

function Gallery(gallery) {
        console.log(Gallery);
        if (!gallery) {
                throw new Error("No Gallery Found!");
        };

        //SELECT ELEMENTS WE NEED
        const images = Array.from(gallery.querySelectorAll('img'));
        console.log(images);
};

//USE IT ON THE PAGE

const gallery1 = Gallery(document.querySelector(".gallery1"));
const gallery2 = Gallery(document.querySelector(".gallery2"));

Let's add next, previous, and modal buttons. You will see the modal is already scaffolded out in the HTML which will pop up and show the image and text associated with the images.

function Gallery(gallery) {
        console.log(Gallery);
        if (!gallery) {
                throw new Error("No Gallery Found!");
        };

        //SELECT ELEMENTS WE NEED
        const images = Array.from(gallery.querySelectorAll('img'));
        console.log(images);
        const modal = document.querySelector('.modal');
        const prevButton = modal.querySelector('.prev');
        const nextButton = modal.querySelector('.next');
};

//USE IT ON THE PAGE

const gallery1 = Gallery(document.querySelector(".gallery1"));
const gallery2 = Gallery(document.querySelector(".gallery2"));

We are going to add if statements to prevent running code if the selector doesn't exist.