Deprecated: Function create_function() is deprecated in /var/www/vhosts/eduardoarellano.com/d4mations.com/wp-content/plugins/wp-automatic/wp-automatic.php on line 70
Gallery Using HTML, CSS, And JavaScript | How To Open Images Using JavaScript | JavaScript Tutorial | D4mations.com
  • Friday , 4 December 2020

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

Code Canyon



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

3d Ocean

Related Posts

26 Comments

  1. Magda Pie
    May 19, 2020 at 08:58

    i learnt a lot of js but I am afraid that I wouldn;t do it on my own.

  2. ΘΕΟΔΩΡΟΣ ΣΤΟΥΡΑΪΤΗΣ
    May 19, 2020 at 08:58

    When I open the images, it doen't sshow them, although I've follow the steps correctly. Can anyone help?

  3. sahadat Riad
    May 19, 2020 at 08:58

    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

  4. S.P. Johnson
    May 19, 2020 at 08:58

    Your content is the best in this genre that I've come across so far. Keep up the good work!

  5. Lara Veg
    May 19, 2020 at 08:58

    I've really learned a lot of javascript with this. Many thanks!

  6. joshua moskovitz
    May 19, 2020 at 08:58

    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. Sian Lee
    May 19, 2020 at 08:58

    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.

  8. Jared Aitken
    May 19, 2020 at 08:58

    im trying to do the slides on a page not in a pop up. Any tips for how to do this?

  9. Baishali Chetia
    May 19, 2020 at 08:58

    I am facing a problem. Every time i click on the big image to close it , it says closeImg function is not defined. Please help me with it. Thanks

  10. Salma LAKHLIFI
    May 19, 2020 at 08:58

    I finished your whole javascript course, is that all ? I mean I wanna learn everything in javascript would your videos be enough ?

  11. tam chan
    May 19, 2020 at 08:58

    Amazing !!!!!!!!!!!!!!!!!!!!!!!!

  12. grace grace
    May 19, 2020 at 08:58

    Your lessons are so good thank you bro. good luck more

  13. José Amador
    May 19, 2020 at 08:58

    Is it possible to use both of this in a single page¿?

  14. Claudio Bras
    May 19, 2020 at 08:58

    I'm enjoying these tutorial

  15. Oblivion
    May 19, 2020 at 08:58

    While I was watching this I was like didn't you used index… Anyway grate video

  16. Élio Fernandes
    May 19, 2020 at 08:58

    newImg.onload is not a function. Any one?

  17. Andy John
    May 19, 2020 at 08:58

    thank you…

  18. Brahma Dev
    May 19, 2020 at 08:58

    Well Explained and learnt a lot
    Thanks for sharing the knowledge… 🙂 🙂

  19. 김승우
    May 19, 2020 at 08:58

    lol

  20. Joe Goodman
    May 19, 2020 at 08:58

    I just finished the entire course, I learned a lot of new things, thank you very much Daniel :'D

  21. obaidullah Ahmad
    May 19, 2020 at 08:58

    hi mr how should i remove the two double quote prenteser. it will be so helpfull

  22. Pierre Boone
    May 19, 2020 at 08:58

    A very clear video, thank you

  23. mr ceejay
    May 19, 2020 at 08:58

    great tutorial my friend, I watch all your videos thanks. its called a full stop don't know why you call it punctuation (fyi)😊.

  24. Filip Svoboda
    May 19, 2020 at 08:58

    man you are looking like Elon Musk

  25. DiNOo Gaming
    May 19, 2020 at 08:58

    this shoud've been done with much much less code!!

  26. Filip Medak
    May 19, 2020 at 08:58

    Thank you, your tutorials are on a whole another level. Cheers!

Leave A Comment

You must be logged in to post a comment.