Image Zoom Effect in E-commerce Website using Javascript

แชร์
ฝัง
  • เผยแพร่เมื่อ 10 พ.ย. 2024

ความคิดเห็น • 29

  • @lundeveloper
    @lundeveloper  6 หลายเดือนก่อน +6

    If you encounter an error that you cannot zoom an image in a certain browser, just add the pointer-events: none attribute to the #imageZoom::after element in CSS, all problems will be solved.❤

    • @normanejm
      @normanejm 3 หลายเดือนก่อน

      Thanks! But I'm curious... Why this give us a problem??

    • @KLEY_
      @KLEY_ 23 วันที่ผ่านมา

      ​@@normanejmi think bc its get offset position of after image and idk some browsers dont know how to understand this

  • @lundeveloper
    @lundeveloper  6 หลายเดือนก่อน +1

    Don't forget to like, subscribe to the channel and leave a comment to share with each other, who knows, maybe it will become the topic for the next video.

  • @MuhammadAli-fn4xb
    @MuhammadAli-fn4xb 25 วันที่ผ่านมา

    SO much love and respect to you brother
    you just saved my day
    I've been stuck on this for 4 days 😅😅😅😅😅😅

  • @navnav1819
    @navnav1819 6 หลายเดือนก่อน +3

    Never thought MrBeast would be teaching me how to code lol. Great vid!

  • @ebrarulhaquehamim5794
    @ebrarulhaquehamim5794 4 หลายเดือนก่อน

    i have watched some videos too much long but they are not explaining the code finally a short video with only the main topic Thank you

  • @farukweb
    @farukweb 3 หลายเดือนก่อน +1

    Nice tutorial for zoom effect

  • @حذيفةأحمد
    @حذيفةأحمد หลายเดือนก่อน

    أسلوب رائع في الشرح استمر
    شكراا

  • @Dharma270
    @Dharma270 5 หลายเดือนก่อน

    Best explain ever in my whole life🎉

  • @MdNaimurRahmanHera
    @MdNaimurRahmanHera 6 หลายเดือนก่อน

    Your explanation is awesome, brother. I especially appreciate the way you explain mathematical calculations.

    • @lundeveloper
      @lundeveloper  6 หลายเดือนก่อน +1

      Because I think these are the most confusing steps, I tried to explain more clearly 😍

  • @benaliyimali
    @benaliyimali 3 หลายเดือนก่อน

    its fancy bro thanks

  • @akhyanmatembezi9756
    @akhyanmatembezi9756 3 หลายเดือนก่อน

    your good in this bro i want to become as you

  • @matiasromera330
    @matiasromera330 4 หลายเดือนก่อน

    I faced the problem of creating a zoom component, so I had to use Canva, which is more complicated! If I had seen this video then...

  • @PrajwalSingh-ge1ke
    @PrajwalSingh-ge1ke 4 หลายเดือนก่อน

    Great Video man! Saved my day! Anyway, i want to know how to apply this on page multiple images? Please guide me! 🙏🏽❤

  • @Mattaken4
    @Mattaken4 6 หลายเดือนก่อน

    can never go wrong

  • @Dstoic
    @Dstoic 5 วันที่ผ่านมา

    thx

  • @gammingpirets520
    @gammingpirets520 6 หลายเดือนก่อน

    Great content ❤

    • @lundeveloper
      @lundeveloper  6 หลายเดือนก่อน

      Thank you ❤️❤️

  • @RE-bx8qk
    @RE-bx8qk 6 หลายเดือนก่อน

    Can you please make a new add to cart checkout with detail !

  • @SmartC2007
    @SmartC2007 6 หลายเดือนก่อน +1

    Hey. Thanks a lot for the great video. I learned a lot. I have one issue though. I use Chrome on a Mac. When I use the mouse coursor and go quickly onto the picture, the zoom effect does not happen, only when I go slowly over the page?! I think this is very weird.

    • @lundeveloper
      @lundeveloper  6 หลายเดือนก่อน +2

      Hi, In your case, add pointer-events: none to the ::after element in CSS ❤️❤️

    • @SmartC2007
      @SmartC2007 6 หลายเดือนก่อน +1

      @@lundeveloper Thanks a lot for your quick reply. This fixed it !!! :)

  • @ikbo
    @ikbo 2 หลายเดือนก่อน

    In actual ecom websites, you don't zoom into the original image like that. Instead you have a higher resolution image in a separate container which you zoom into. Rest of the high level logic is the same

  • @vaniakamran8624
    @vaniakamran8624 3 หลายเดือนก่อน

    Hi, it was really great, but unfortunately, I wrote all the codes and it didn't work, and my problem is that when I move the mouse over my photo, my photo turns black.can you guid me? thanks

    • @pria998
      @pria998 3 หลายเดือนก่อน

      Try to copy his code from the source code he has provided then check if it's working or not

    • @pria998
      @pria998 3 หลายเดือนก่อน

      If it's working simply compare your code with actual code