D4mations.com

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: https://www.pexels.com/
CSS Grid: https://www.youtube.com/watch?v=HgwCeNVPlo0
Flexbox: https://www.youtube.com/watch?v=0e02dl66PYo

Timestamps:
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

➤ MEET OTHER AWESOME PEOPLE!

FollowAndrew
Channel: https://www.youtube.com/c/FollowAndrew
With over 20 years experience, Andrew is creating web & front-end design tutorial videos!

➤ GET ACCESS TO MY LESSON MATERIAL HERE!

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: https://www.patreon.com/posts/javascript-30958533

Original source

d4mer

, , , , , , ,

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

  3. newImg.onload = function() {

    let imgWidth = this.width;

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

    let nextBtn = document.querySelector(".img-btn-next");

    nextBtn.style.cssText = "right: " + calcImgToEdge + "px;";

    let prevBtn = document.querySelector(".img-btn-next");

    nrevBtn.style.cssText = "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

  6. 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?

  7. 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){

    document.querySelector("#current-img").remove();

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

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

    getImgWindow.appendChild(newImg);

    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");

    newImg.setAttribute("id","current-img");

    getLatestOpenedImg = calcNewImg;

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

Leave a Reply