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

Поделиться
HTML-код
  • Опубликовано: 18 ноя 2024

Комментарии • 202

  • @查理-u4q
    @查理-u4q 3 года назад +20

    Hey Daniel, I know that I arrive a bit late, I finished your whole Html&Css and Js courses and felt bad that I've never let any comments , so here it is : Big thanks man for all your hard work, your courses are amazing and makes you always want to learn more. I understood from your current videos that you took a break on tutorial videos to follow what you like, regardless of what people think. You re totally right and deserve it. I think sometimes some people don't realize the work it takes to create videos on RUclips, especially about tutorial with solid content. Anyway, Enjoy :)

  • @DaedalusDM
    @DaedalusDM 3 месяца назад

    This probably saved me dozens of hours of having to work out each individual step to get these results or something similar to them. Thanks for continuing to be a champion, Daniel.

  • @magografico
    @magografico 2 года назад +9

    I did it!
    I did it!
    I did it! 😁
    Thank you so much Dani! These lessons have been sooo educational and inspiring for me.
    As an "old school" graphics designer I know some HTML and CSS, but I'm totally new to the JS world and this playlist (JavaScript Tutorial) has opened my eyes to all the possibilities; and the way you explain things is clear and easy to understand. Greetings from Mexico!

  • @jkk9829
    @jkk9829 4 года назад +3

    i started programming from your HTML/CSS videos, and now i've nearly finished your JavaScript tutorials. Your videos are absolutely the best, among all the videos on RUclips, for beginners. You've definitely made my first step for working as a programmer;))) Thank you, Daniel!

  • @Veianya
    @Veianya 4 года назад +4

    I've been through so many courses and teachers while trying to learn JavaScript. And your videos have been more helpful to me than anything else. Thank you for the work that you put into this.

  • @Lug4ru
    @Lug4ru 3 года назад

    F-I-N-A-L-L-Y a video, where someone shows how to build working buttons on clicked IMAGE!!!! THANK YOU

  • @cubedev4838
    @cubedev4838 5 лет назад

    Nowdays people want kind of this tutorial, not just like before just only basics for beginner😀anyway thank you

  • @Jugaadu_tech
    @Jugaadu_tech 2 года назад +1

    The courses offered in both HTML and Javascript are awesome. Very interesting and informative. Superlike.

  • @EcuaBlackOps212
    @EcuaBlackOps212 5 лет назад +14

    LOL I was just looking for a video about it and this popped up in my notifications. What a coincidence.

  • @aleksanderbazejczyk8133
    @aleksanderbazejczyk8133 4 года назад +1

    I've just made it to the final episode of HTML CSS course and I started looking for other guys doing galleries. So basically everyone is using Lightbox, where you are teaching us how to do it on our own, and that's what I've been looking for. Damn, you are amazing and I just wanted to wish you lots of new subscribers (just don't stop learning and doing more tutorials!!)

  • @gibran5208
    @gibran5208 2 года назад +1

    That was tough but finally I finished all the videos, thank you very much!

  • @tommyzDad
    @tommyzDad 5 лет назад +1

    Thank you, and thank you again for using pure/ vanilla javascript! I'm at my wits end trying to find tutorials that _do not_ use one framework or another! And thank you for taking the time to user Alert() to demo what's happening in your code!
    If you've not done one yet, I've been searching desperately for a pure javascript tutorial in which 1) The nav menu closes when the user clicks on a link in that menu, and 2) The page smooth-scrolls to the linked section. All the tutorials I've found use only frameworks!

    • @ElNicopewpew
      @ElNicopewpew 4 года назад

      Did you ever find a tut for this? :)

  • @Nerdychicka1
    @Nerdychicka1 Год назад +1

    Absolutely amazing! I was able to follow through so easily. You explain things so well. I couldn't thank you enough for these awesome tutorial/ lesson videos

  • @sayedakbarali5650
    @sayedakbarali5650 5 лет назад +1

    I just follow along today and was AMAZED at what vanilla js can do THANKYOU BOSS

  • @bhavyakumarpanchotiya8254
    @bhavyakumarpanchotiya8254 4 года назад

    please keep it up this JAVASCRIPT tutorial series do not stop in between because your material is very beautiful

  • @s.p.johnson9140
    @s.p.johnson9140 4 года назад +1

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

  • @peachesgalore7689
    @peachesgalore7689 5 лет назад +15

    Nice hat, Daniel. You look like a young Vito Corleone auditioning for Grease.

  • @joegoodman4358
    @joegoodman4358 4 года назад +2

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

  • @laurenceV-D
    @laurenceV-D 5 лет назад +2

    You explain very well. Althought I'm french, I understant everything. Thank you !

  • @FordExplorer-rm6ew
    @FordExplorer-rm6ew 5 лет назад

    Yes. More full projects. Need more tutorials where the project is more full like this. Like you would see in the real world

  • @Shivasir7
    @Shivasir7 4 года назад

    I really enjoyed the way yout teach us in the simplest manner...this is my best channel...to learn the coding.....

  • @YOUTUBE_IS_WOKE
    @YOUTUBE_IS_WOKE 4 года назад +1

    Another great tutorial, not boring and just the right speed (well, I set my playback speed to 1.5) and because I'm trying to get as much JS learning without frameworks and other libraries, this is awesome! Thanks again.

  • @arvsnacs422
    @arvsnacs422 2 года назад

    Thanks. After a week understanding what happen on your code I was able to done it right on my own now and also change some code on js like instead of doing the getComputedStyle(i might forgot this)... I use:
    if(index ===0){setNewImgUrl = 1}
    else{setNewImgUrl = index+1} or use switch. I was trying if i get it other way. I cant believe Ive done it. Hehe. Thanks.

  • @moisescastillo3447
    @moisescastillo3447 5 лет назад +1

    you look like Italian jeje, what a great tutorial with pure vanilla javasript, I think it's the best way to understand and learn to program with pure and hard code, keep sharing videos of html5, css3 and vanilla javascript

  • @filipmedak5698
    @filipmedak5698 4 года назад +2

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

  • @hanesmitter1469
    @hanesmitter1469 5 лет назад +4

    I was roaming just looking for this and b💥💥m I banged into it
    Hats of for Nielsen though you have a hut on😁

  • @mohammedtifrani4595
    @mohammedtifrani4595 4 года назад

    i'm from algerai following ur creative art good job bro

  • @Alex-jp5uc
    @Alex-jp5uc 3 года назад

    Thanks so much, man help me a lot with my assignment at school

  • @smoothbeak
    @smoothbeak 3 года назад

    Very excited about watching this, I've had a glance and it looks great!

  • @ademineshat
    @ademineshat 5 лет назад

    Great. Thank you.
    It looks like we need a full playlist like these Tutorial like "modern JavaScript" "css" and html.

  • @lulamacabane6869
    @lulamacabane6869 3 года назад

    There is a lot am gonna lean here am willing to go to the next video thanks bro keep up the good work

  • @prathameshjadhav780
    @prathameshjadhav780 3 года назад

    u are awesome dude thx for this playlist ! Can't even believe I finished this in 2 days great content :)

  • @FirdavsiGameDev
    @FirdavsiGameDev 5 лет назад +3

    Great tutorial. Thank you, Daniel!

  • @joshuamoskovitz4074
    @joshuamoskovitz4074 4 года назад +5

    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?

  • @wesleyfeller2114
    @wesleyfeller2114 5 лет назад

    good to see you back with a video!

  • @AYUSHKUMAR-xj4wc
    @AYUSHKUMAR-xj4wc Год назад

    Thanks Dani❤. Love from India🥰🥰

  • @gencbeka331
    @gencbeka331 2 года назад

    Thank you very much for this awesome tutorial 👍👨‍💻

  • @claudiobras22
    @claudiobras22 4 года назад

    I'm enjoying these tutorial

  • @janpedersen9120
    @janpedersen9120 5 лет назад +1

    Awesome video from fellow dane, thanks for helping us out. Appriciate all your content.

  • @bonniechang1377
    @bonniechang1377 5 лет назад

    THANK YOU. 感謝能學到更深入的Javascript

  • @brahmadev7419
    @brahmadev7419 4 года назад +1

    Well Explained and learnt a lot
    Thanks for sharing the knowledge... :) :)

  • @KatyXa24
    @KatyXa24 2 года назад

    Thank you, this video was extremely helpful!

  • @suong534
    @suong534 5 лет назад

    Thank Daniel. This is a lot of work.

  • @borrowedmemes4651
    @borrowedmemes4651 5 лет назад +46

    I just noticed you look like Elon Musk

    • @brahmadev7419
      @brahmadev7419 4 года назад

      isn't it...!!

    • @YOUTUBE_IS_WOKE
      @YOUTUBE_IS_WOKE 4 года назад

      Like his younger brother...

    • @fisherofmen489
      @fisherofmen489 4 года назад

      my height doesnt change ik i inserted the images into html not css and i used the spans in grid area id that an issue?

    • @John-qk4mk
      @John-qk4mk 3 года назад

      and almost sounds a bit like him to!

    • @ryanwanjie9576
      @ryanwanjie9576 2 года назад

      fr mahn

  • @pierreboone568
    @pierreboone568 4 года назад

    A very clear video, thank you

  • @rudethunder6640
    @rudethunder6640 5 лет назад +1

    You are the BOSS

  • @ОлександрМета
    @ОлександрМета 2 года назад

    Great tutorial, thanks Dani

  • @eu1283
    @eu1283 5 лет назад +1

    thank you so much for the video! it helped me a lot and your explanations are +++++++

  • @FordExplorer-rm6ew
    @FordExplorer-rm6ew 5 лет назад

    Thabk you i am kind of dumb so the explanation helps.
    No cap I'm just kind of dumb and more slow than alot of other programmers

  • @arturkarapetyan9455
    @arturkarapetyan9455 3 года назад

    Thank you for the course!

  • @gracegrace8891
    @gracegrace8891 4 года назад

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

  • @tariqismail3263
    @tariqismail3263 5 лет назад +1

    Great lesson!!!!!!
    Love you bro

  • @spreadItWide
    @spreadItWide Год назад

    Coding for 90 minutes in a leather coat?? I like it!

  • @nekabsmail6622
    @nekabsmail6622 3 года назад

    great tutorial , you look good by the way.

  • @sonnyb6536
    @sonnyb6536 5 лет назад

    Finally got around to watching this! Love the hat and getup Mr. Daniel Corleone LOL

  • @patriciamendes7557
    @patriciamendes7557 3 года назад

    Loved it! Thank you!

  • @milannikolic6289
    @milannikolic6289 4 года назад

    Nice video man, clean code!

  • @TomkinsOkello
    @TomkinsOkello 5 лет назад +1

    Hello, thanks for this tutorial and am sure it’ll be helpful.

  • @alexanderabraham5537
    @alexanderabraham5537 2 года назад

    Amazing work man

  • @ertugrulsaka1193
    @ertugrulsaka1193 3 года назад

    you are great..dani

  • @roiunger7796
    @roiunger7796 5 лет назад +1

    hey dear! much appreciate your work!

  • @mirceat8949
    @mirceat8949 Год назад

    Thank you , i learn a lot .I'm curious how to enter up to 100 pictures :))

  • @elel928
    @elel928 3 года назад

    Great tutorial. Would love a tutorial about how to cobine this with oob php to select images from table.

  • @warriorx5d
    @warriorx5d 4 года назад +1

    Amazing Tutorial. Do you have a Tutorial to extend this to add the posibility to multiselect the thumbs gallery so, lets say, you can make a .txt with a list of those files? Thnx!

  • @mariazinchyn
    @mariazinchyn 3 года назад

    Thank you!

  • @mrceejay7086
    @mrceejay7086 4 года назад

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

  • @tamchan3610
    @tamchan3610 4 года назад

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

  • @bodunogun
    @bodunogun 5 лет назад

    Thanks really helpful ✌🏾.

  • @Sir_Curvine
    @Sir_Curvine 3 года назад

    excuse me sir..i was lost at the part about the getImgUrlPos variable..
    i diddny understand what is the used of that variable and how did you select the Image outside of your thumbs folder..how did you connect those two in the variable??
    hope to get a response from you..
    sorry..just a newbie in js.

  • @Skilled9000
    @Skilled9000 2 года назад

    Daniel is smart boy.

  • @sonykresna8779
    @sonykresna8779 5 лет назад

    Goodd.. Im see you in indonesiaaa

  • @Frankslaboratory
    @Frankslaboratory 5 лет назад

    Nice

  • @adwaitbokade2890
    @adwaitbokade2890 3 года назад +1

    sir it was great tutorial , but i am facing problem in grid -template -area : there is no space for third image to extend down in css grid

  • @oblivion6672
    @oblivion6672 4 года назад

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

  • @king_israel6
    @king_israel6 5 лет назад

    Thanks man and I like ur jean jacket. Please can you do a video on how to change username just like the ones in social medias

  • @mmelimahlobo7656
    @mmelimahlobo7656 9 месяцев назад

    I got lost when you used the foreach with a function that is powerful stuff,still trying to wrap my head around it😅

  • @hamzahabdelmoaty2333
    @hamzahabdelmoaty2333 5 лет назад

    FINALLLLLLLLY

  • @gencbeka331
    @gencbeka331 2 года назад

    👍👏👏👏

  • @Etheric_art
    @Etheric_art 2 года назад

    hej ! thank you so much for your help ! I always wanted a gallery for my art portfolio ! Is it possible to do with images and scripts hosted somewhere else ? I am using bigcartel, they don't host pictures and javascript files...

  • @devduttsinh4704
    @devduttsinh4704 4 года назад

    Hey dude thanks alot

  • @imyou1166
    @imyou1166 5 лет назад

    Post videos everyday... I don't want to check everytime you channel

  • @ademottoman962
    @ademottoman962 5 лет назад +1

    hi mmtuts can you stream some thing about coding because its fun to see ppl code real time and answer questions if possible so please if you can stream some coding stuff :)

  • @_ankit_ak_
    @_ankit_ak_ 3 года назад

    Gallery Done 26:15
    Watching

  • @enfysgreen2758
    @enfysgreen2758 5 лет назад +2

    if i inspect the site on browser it say's Unable to get property 'replace' of undefined or null reference
    how do i fixs this ??
    and
    do you know how you have to make a database witch myslql or a other way to make it because i have watcht your html css php & javascript tutorials and you say in some vids that we need a data base i have a old pc that i am using as a server for mc server but i wanted tot make a site for the server and my own database on the pc but not useing a pre build that i have to pay for

    • @enfysgreen2758
      @enfysgreen2758 5 лет назад +1

      nothing to do with the reset.css file.
      my browser say's after instect and then go to console becouse it says it has a error and then there is a line in red and that is this line >>>>>( Unable to get property 'replace' of undefined or null reference)

    • @syborgde
      @syborgde 4 года назад

      @@enfysgreen2758 it happen the same with me((replace function is not defined, still looking for a mistake that i did write, but found nothing.

    • @enfysgreen2758
      @enfysgreen2758 4 года назад

      @@syborgde i stopt working on it i remade the site 7 times ut had the same prolem every time so i stopt

  • @MDSakib-hz1kh
    @MDSakib-hz1kh 4 года назад

    Tnq u sir

  • @viewvast
    @viewvast 5 лет назад

    Can You make a video on Rating & Voting for PHP? Thank You

  • @williambradley1448
    @williambradley1448 Год назад

    Hi Dani, thank you so much for this, that was hard work - I've been at it 3 days now and have it working fairly well. The two things that don't work for me are 1) the placement of the next and prev buttons - prev is fine but next insists on sitting just over the edge of the first photo, and 2) again the next and prev buttons, neither of them move for different sized images, I have no idea what I am doing wrong with it but will continue to battle. Any hints would be good.

    • @williambradley1448
      @williambradley1448 Год назад

      I managed to fix both problems, the second was an easy fix, I noticed your note on the video that we had to remember to add the class in, so I did that and it immediately fixed the problem. The first... that was more difficult, I ended up having to have
      let calcImgToLeftEdge = ((windowWidth - imgWidth) / 2) - 80;
      let calcImgToRightEdge = ((windowWidth - imgWidth) / 2) - 100;
      and their respective calls in order for it to work. Problem? I don't know why.

  • @andyjohn907
    @andyjohn907 4 года назад

    thank you...

  • @castro6612
    @castro6612 4 года назад

    Dani!!!! can you make a tutorial about async await and promises? I watched a lot of tutorials about that but I really cant understand.

  • @cubedev4838
    @cubedev4838 5 лет назад

    Can i know what type of microphone u used? I wanna buy, u can give your affiat link also...

  • @Merlinke91
    @Merlinke91 5 лет назад

    HI Daniell, my xamp sql says: This may be due to a blocked port, missing dependencies? I tryed to change the port 3307 and also deleting some files in mysql-> data. im just using wamp for now, but i lost my data base ( which wasnt that big loose actually). : - )

  • @anselmziegler3461
    @anselmziegler3461 6 месяцев назад

    Thanks for this great tutorial! I think to make it responsive for tablet and smartphone we have to use CSS? Or do I need JS again?

    • @Dani_Krossing
      @Dani_Krossing  6 месяцев назад

      You would use CSS, or a framework to have it automatically be responsive 🙂

  • @newprogrammer1811
    @newprogrammer1811 5 лет назад

    alright 'Agent Mmtuts' Javascript gallery will be our mission for today.

  • @salmalakhlifi1901
    @salmalakhlifi1901 4 года назад

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

  • @bogdandascalu6722
    @bogdandascalu6722 3 года назад

    By order of the Peaky Blinders! 😁

  • @lukacsaba
    @lukacsaba 5 лет назад +1

    Hello!
    It's a great video, my only problem with it is the static image part. In a real gallery you are using some sort of parser to parse all your images in a given directory or even parse multiply levels of directories to categorize gallery images. And also in real life your client will not give you perfectly sized images with same width or height. You have to take care all of this sh*t in the parser. In this video if you are replacing only the image source definitions to a parser, this grid will fall apart or images look ugly.
    Personally I would love to see some more realistic stuff from you, because static pages are way in the past.

    • @Dani_Krossing
      @Dani_Krossing  5 лет назад +3

      I think you might be missing who the target audience is for this video. The video is meant to show people who are new at Web Dev “how to create a simple gallery using JS”, so they can apply a ‘concept’ to their own products.
      The scenario you are describing is indeed what you would experience on larger websites which has more than “just a simple gallery”, however this video isn’t aimed to teach that. The purpose is to show students how to open images and what the thought process behind coding simple JavaScript is like :)

    • @lukacsaba
      @lukacsaba 5 лет назад +1

      @@Dani_Krossing Fair point, your are right about it. However, personally(maybe I'm alone, with it, don't know) I still would love to see some more advanced tutorials about these topics, because your videos are great and I think people who are farther in web development could take away so many knowledge from you :)

  • @YashSahu14
    @YashSahu14 5 лет назад

    Wow

  • @cosmicgoo8074
    @cosmicgoo8074 3 года назад

    Your tutorials have been fantastic. If been converting my 100% flash actionscript website to JavaScript. I have one hiccup in the conversion. If you have the time, would you please contact me. No one I’ve contacted has the answer or suggestions. Thanks

  • @larrycalvert843
    @larrycalvert843 2 года назад

    Great class - you have a very nice style. I went looking for the source and couldn't find it. Any chance I could get it? Thanks again.

    • @Dani_Krossing
      @Dani_Krossing  2 года назад

      The source material is available in the links in the description 🙂

  • @baishalisharmah
    @baishalisharmah 4 года назад

    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