Gallery Using HTML, CSS, And JavaScript | How To Open Images Using JavaScript | JavaScript Tutorial

In this tutorial, I will show you how to create a simple but amazing gallery for your websites using HTML, CSS, and JavaScript. I will explain all the code in debt to make sure you have as much understanding of what we do and why we do it.

A few links:
Royalty free images:
CSS Grid:

0:00:00 – Intro
0:05:09 – Getting our images ready for the gallery
0:07:53 – Creating the HTML for our Gallery
0:13:33 – Creating the CSS for our gallery
0:34:46 – Open our images using JavaScript
0:58:25 – Closing our images using JavaScript
1:00:28 – Change to next image using JavaScript


With over 20 years experience, Andrew is creating web & front-end design tutorial videos!


First of all, thank you for all the support you have given me!

I am really glad to have such an awesome community on my channel. It motivates me to continue creating and uploading content! So thank you!

I am now using Patreon to share improved and updated lesson material, and for a small fee you can access all the material. I have worked hard, and done my best to help you understand what I teach.

I hope you will find it helpful 🙂

Material for this lesson:

Original source

26 responses to “Gallery Using HTML, CSS, And JavaScript | How To Open Images Using JavaScript | JavaScript Tutorial”

  1. newImg.onload = function() {

    let imgWidth = this.width;

    let calcImgToEdge = ((windowWidth – imgWidth) / 2) – 80;

    let nextBtn = document.querySelector(".img-btn-next"); = "right: " + calcImgToEdge + "px;";

    let prevBtn = document.querySelector(".img-btn-next"); = "right: " + calcImgToEdge + "px;";


    main.js:90 Uncaught TypeError: Cannot read property 'style' of null
    at HTMLImageElement.newImg.onload (main.js:90)

    what is mean by that??

    plz help

  2. While I was working I noticed that my "next" button was right next to the image. After breaking my head it's because I noticed that I had a scroll bar in my browser because I put longer images. So I calculated the img to edge differently for the left and right buttons and then the spacing was correct.
    For the right I did 90px and left I left at 80px.
    Is there a better way to do this?

  3. I made my js file just like you, but it doesn't work as it should. everything works before function changeImg, when I click the next button, it just shows undefined image. my code can't define calcNewImg in consolelog it shows
    GET file:///E:/xxxx/img/imgundefined.jpg net::ERR_FILE_NOT_FOUND, so it naturally leads to a faliure. this is my changeImg().

    function changeImg(changeDir){


    let getImgWindow = document.querySelector(".img-window");

    let newImg = document.createElement("img");


    let calcNewImg;

    if(changeDir === 1){

    calcNewImg = getLatestOpenedImg + 1;

    if(calcNewImg > galleryImages.length){

    calcNewImg = 1;



    else if(changeDir === 0){

    calcNewImg = getLatestOpenedImg – 1;

    if(calcNewImg < 1){

    calcNewImg = galleryImages.length;


    newImg.setAttribute("src","img/img" + calcNewImg + ".jpg");


    getLatestOpenedImg = calcNewImg;

    what is wrong with my code?? i tried like hundred times before i leave this comment.

Leave a Reply