المدة الزمنية 18:35

How To Make Image Gallery Using HTML, CSS & JavaScript | Create Image Gallery Step by Step

بواسطة GreatStack
112 433 مشاهدة
0
2.9 K
تم نشره في 2021/07/03

How To Make Image Gallery Using HTML, CSS & JavaScript | Create Responsive Image Gallery Step by Step using HTML, CSS and JavaScript ❤️ SUBSCRIBE: https://goo.gl/tTFmPb In this video you will learn about HTML and CSS image gallery design. We will learn how to create responsive images gallery with the help of CSS grid layout. After that we will add hover effect on images of this gallery. we will also add click function on image, when we will click on any image then the same image will be displaying in center of web page and remaining part of the website will become dark. there will be a close icon, if we click on the close icon, it will close the popup image and we can again see all images of the gallery. we will make this click function using very simple JavaScript. Learn CSS Grid Layout: ► /watch/UXvLy2a6wf46L Download Images: https://drive.google.com/file/d/15UGz-vxDFygMNLM9GdToASUtg6bVwMiH/view?usp=sharing ----------------------------------------- Suggested Course: ❤️ Complete website Using HTML and CSS ✔️ 8 Complete website step by step ✔️ Source Code Download ✔️ 76 Lectures, 12 Hours Video ✔️ Course Completion certificate 👉 https://easytutorialspro.com/go/course/ ------------------------------------- Recommended Videos: Learn Complete HTML and CSS from basics: ► /playlist/PLjwm_8O3suyO2gdXdWHKgM-mO2Y251zzU Make A Complete Website for college using HTML & CSS: ► /playlist/PLjwm_8O3suyP5kGKmwS_DM0Hs1j7fshi5 How to make a Business website step by step: ► /watch/oK0F6_HHv99HF How to make personal resume website step by step: ► /watch/IGbjuE8NFCqNj How to make fitness website design using HTML CSS: ► /watch/okOj-XBAPb4Aj How to make an Ecommerce Website Design: ► /playlist/PLjwm_8O3suyM_2Lo9aAIw3HqjOPor8j9g How to make a Job Portal website design with HTML & CSS: ► /watch/QDBe-a8xgHcxe How to make travel website design with HTML CSS Bootstrap: ► /watch/8fMU9cqEaiAEU ------------------------------------- Affordable web hosting (coupon- EASYTUTORIALS) 👉 https://easytutorialspro.com/hosting/ My recommended tools and tutorials 👉 https://easytutorialspro.com/ ------------------------------------- ◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see) Join Channel Membership: ► /channel/UCkjoHfkLEy7ZT4bA2myJ8xA/join ------------------------------------- Image credit: https://www.pexels.com ------------------------------------- Like - Follow & Subscribe us: ◼️ YouTube: https://goo.gl/tTFmPb ◼️ Facebook: https://goo.gl/qv7tEQ ◼️ Twitter: https://twitter.com/ItsAvinashKr ◼️ Instagram: https://instagram.com/iamavinashkr/

الفئة

عرض المزيد

تعليقات - 139
  • @
    @saggysshortsمنذ 3 سنوات Sir your channel is reason to fall in love with web design ❤️ 20
  • @
    @nerdyfulloمنذ 3 سنوات SIR, YOU ARE A LEGEND!.
    THANK YOU GAZILLION TIMES!
    5
  • @
    @uccoskunقبل 3 أشهر very good instruction. Very helpfulll..
  • @
    @deadpolymers3416منذ 2 سنوات Exactly what I was looking for. This a great, and very simple way to add a gallery to my website. Thank you. 8
  • @
    @nurshamimsaidiمنذ 2 سنوات Thanks for sharing on how to do this. I need more time understanding all of this honestly. 1
  • @
    @waynemunene8346منذ 2 سنوات Amaizing work. I managed to create my own gallery too.
  • @
    @seppneimusser5723منذ 2 سنوات Your tutorials are amazing, thank your so much for that^^
  • @
    @anikhossain8172العام الماضي thank you very much brother. its a nice and very help full video for me.
    again thanks a lot.
    keep going like this .
    best of luck.
    Love form Bangladesh.
  • @
    @englishmaster869قبل 11 أشهر Thank you for taking the time to help me with my project. I really appreciate it.
  • @
    @peterkabiru5144العام الماضي I like your style of explaining things. . have you ever thought of diving deeper to backend ..and create a complete webapp with Nodejs. then share it id="hidden2" class="buttons"> here..a complete process like the way you do with Front end. Probably add a framework like React for Front end. I think your style of teaching can make the hard staff easier to absorb like the way you do with css tricks ....وسعت 1
  • @
    @codigofontetecnology4748منذ 3 سنوات Dear friend I love your content very much he helped me a lot and was source of inspiration for me to make up a channel source code continue so because so you will help many new future web programmers. ✌ 1
  • @
    @DejanPavlovic-tu8vjالعام الماضي If there is left and right scroll button,it would be perfect :) Still amazing,I will add my photos here and make it library of our trips and celebrations. Thank you very much
  • @
    @jurglienhard5913العام الماضي Dear friend
    Your presentation is perfect and works flawlessly. I'm excited.
    Question: Instead of the selected large image, I would id="hidden5" class="buttons"> like to display the content of a stored URL address directly. is this possible Thank you for any suggestion. Best regards from Switzerland from Jürg Lienhard
    ....وسعت 4
  • @
    @Marcin-yc9olمنذ 2 سنوات Thank you so much for the tutorial. Much love
  • @
    @kavitagoskiمنذ 2 سنوات Thanks a lot for this video. It really helped me a lot..!! 1
  • @
    @luckymiracle669منذ 2 سنوات exactly what I was looking for. This a great, and very simple way to add a gallery to my website. Thank you. 1
  • @
    @Ravikumar-ir8kgمنذ 3 سنوات Great effort sir. I see for your vedio's make simple website own..
    Thanks a lot uploaded vedio
    2
  • @
    @user-vr4rp2ux9zقبل 7 أشهر It was very helpful.and very creative
  • @
    @javiervarela8189منذ 2 سنوات Thanks for the content, it's great 1
  • @
    @sumitprusty5256منذ 3 سنوات It will be very helpful for us who want to be an affiliate. 1
  • @
    @Triple_A1العام الماضي thank you so much @Easy Tutorial you're one a million, keep up the good work
  • @
    @pavanprasad9359منذ 3 سنوات Thank you.. your video helped me a lot 1
  • @
    @johnmackin46منذ 3 سنوات Great video! Would like to see buttons on the modal to navigate between images 4
  • @
    @gohliyee4148منذ 2 سنوات Thank you so much for your work !!!! Really appreciate it !!!
  • @
    @NthabelengRaphalaمنذ 2 سنوات i love this and im using it for my poe submission at school . please , how can i add a different caption(paragraph) when i open an image 1
  • @
    @AlexAnder-fk2ygالعام الماضي thanks for the vid, interesting to know how to add prev and next buttons to it
  • @
    @emmanuelxs6143منذ 3 سنوات Can you do the gallery in a pyramid form 2
  • @
    @ankitakar8828منذ 3 سنوات minimal diversion from the concept and absolute to the point codes WHAT ELSE DO WE NEED? 1
  • @
    @ferdinandgetti1260منذ 3 سنوات Great! Thanks. (just for bigger screen i would suggest minmax 300px
  • @
    @vanshbansal2406منذ 3 سنوات hii sir i watch all your vedios it is very helpful sir thankyu so much 1
  • @
    @kaustubhdeore7789منذ 3 سنوات Great video thanks bro. Can u make a video on how to add upload file option so that i can add images from my files to this image gallery
  • @
    @MuradHasanAlveeمنذ 3 سنوات Thanks sir htm CSS and JavaScript use Karke video upload Kardo 1
  • @
    @sumitprusty5256منذ 3 سنوات Sir please make a website for affiliate marketing using html , css and javascript 2
  • @
    @HarshaValorantقبل 10 أشهر I referred your html css code. For functionalities I used Javascript. I fetched the full image id,clicked image id and changed the fullimage.src path to id="hidden6" class="buttons"> clicked image path. But I am not able to display it. I asked chatgpt but it says that - "If you are working with local image files on your computer, displaying them directly from the local file system using JavaScript in a web browser is restricted due to security reasons." Can you please help me?
    const images = document.querySelectorAll('.image');
    let fullImageElement = document.querySelector('.full-img');
    images.forEach(image => image.addEventListener('click',function(e){
    let src = e.target.src;
    let fullImageElement = document.querySelector('.full-img');
    fullImageElement.src = src;
    fullImageElement.style.display = 'flex';
    })
    );
    ....وسعت 1
  • @
    @vigneshravi4058منذ 3 سنوات Why we are using div for bg instead of giving bg image in body. Any specific reasons 1
  • @
    @futuredays1946منذ 3 سنوات Great video, Thank you so much sir how can i get the source code
  • @
    @senoucimohammedelamine4225العام الماضي can i use the same formula for figures instead of images?
  • @
    @sanchitagarwal9015منذ 3 سنوات Sir please make a video on javascript tutorial 1
  • @
    @mohammadasif6302منذ 2 سنوات Sir please make playlist on react js project
  • @
    @rizwanwarisالعام الماضي From where I can download your all files which you have created in this tutorial??
  • @
    @ankurdas2943العام الماضي how to add a left/ right option in the full image view window, please help
  • @
    @sukeshbera8759منذ 2 سنوات how to add like buttons into the image like its in pixelbay and other image website .
  • @
    @vatoloco1348العام الماضي What size are the images, or can we use any size?
  • @
    @mirzadietplansمنذ 3 سنوات Sir please guide me for the next and previous button functionality for this gallery
  • @
    @ericdomer3292منذ 3 سنوات I'm having issues using z index also could you please upload a website tutorial where z index is used
  • @
    @bilalrashid7783منذ 3 سنوات how to create dropdown navbar using html and css and bootstrap plz make this video 1
  • @
    @tranquilmagister8481منذ 2 سنوات i keep getting red marking on "style.display" in the script tag. and it naturally don't work, ideas?
  • @
    @nazerinjamila7805منذ 3 سنوات plz make a full portfolio website plz plz..
  • @
    @ljinuk81منذ 2 سنوات you are a star thanks, i just need to make it responsive now, appears really small in mobile, tablet mode.
  • @
    @ryan_writes8221قبل 10 أشهر Sir what if i have to add image through button in this gallery?
    Can anyone help me?
    1
  • @
    @MuradHasanAlveeمنذ 3 سنوات Sir
    One problem here when cursor stay in picture corner the picture was vibrate solve this problem sir
    1
  • @
    @usamanaved4575منذ 3 سنوات sir please make a complete construction website tutorial
  • @
    @easy6577منذ 3 سنوات thanks sir <3 how to do it without repeating onclick="openfullIMg()" ????
  • @
    @ericdomer3292منذ 3 سنوات Please make a typing speed checking website
  • @
    @speednb2074منذ 2 سنوات Ek video search music filter ki Banakar lao Sar please
  • @
    @Tech_Pandeyالعام الماضي actually my full img is not working properly so any clue o solution
  • @
    @marcelanratonel9025قبل 4 أشهر How to add text below the small thumbnail
  • @
    @preetyparamanickمنذ 3 سنوات Sir my images are not shown as same like you but i do as same as you say.
  • @
    @jimjarrel9179العام الماضي How long does it take for you to respond?
  • @
    @MusicPsychoمنذ 3 سنوات Sir can we get tha source code file. 1
  • @
    @ivybelocura8910منذ 2 سنوات we don't have the same outcome.. I don't know why my work can't be transformed..
  • @
    @natureworld1513منذ 3 سنوات Thanks, sir how to make online website. 1
  • @
    @sscalertsمنذ 3 سنوات Now how to put download and share buttons below each of these images 5