Nietypowy zoom, powiększenie po naciśnięciu na obrazek.

Cześć, słuchajcie, mam kolejny problem. Wie ktoś może, jak zrobić zoom po naciśnięciu na obrazek jak tutaj (https://fearofgod.com/collections/homepage/products/almond-butter-perla-gum-hiking-sneaker)? Proszę o pomoc

Na szybko znalazłem dość przejrzysty przykład kodu: https://www.w3schools.com/howto/howto_js_image_zoom.asp.

Żeby aktywowało się dopiero po kliknięciu (a nie już po najechaniu), powinieneś zrobić zdarzenie onclick (https://www.w3schools.com/jsref/event_onclick.asp) i w wywoływanej funkcji wstawić zamianę oryginalnego obrazka (elementu <img> w przykładzie) na powiększony fragment obrazka (element <div> w przykładzie). Zamianę najlepiej zrobić chyba za pomocą ustawienia w CSS display: none dla jednego elementu, a np. display: auto dla drugiego (ale jeśli koniecznie chcesz, to możesz też usuwać jeden element i dodawać drugi w Javascripcie, tylko na mój nos to będzie więcej pracy). Piszę "jednego" i "drugiego", bo po zamianie, gdy użytkownik kliknie drugi raz, całość powinna zamienić się z powrotem (chyba że nie chcesz tak i będziesz wymagać przeładowania strony, gdy użytkownik zechce zamknąć powiększenie ;) ).

UDPATE: Nie korzystałem z tego kodu, więc nie wiem, czy będzie działać tak, jak tego oczekujesz.

Wielkie dzięki za poświęcenie swojego czasu. Miłego dnia. Bym Ci dał naj ale nie jest to do końca to czego oczekuję, ale jeszcze raz dzięki :)

Chodzi o to, że po naciśnięciu po obrazek ma się on powiększyć, i aby po poruszeniu myszką w obrębie obrazka zmieniała by się pozycja zoom'a.

Ja bym to zrobił tak: oczywiście wszystko z wykorzystaniem JQuery. Wkładasz w Div za duży obrazek w background-image. Z początku ustalasz "background-size" mniejszy niż oryginał. W stylach domyślny "cursor" dajesz na zoom-in. Potem zdarzenie onclick - zmiana cursora na "all-scroll" oraz background-size na większy. Musisz także zrobic jakąs zmienną np. isZoomed (będzie sie zmianiac na true,false po każdorazowym kliknieciu diva) aby w listenerze ".mouseover" dla tego diva móc edytować pozycje obrazka, parametr "background-position" w tym pomoże. Potrzebna jest tylko pozycja kursora w divie, tutaj masz pomoc: https://css-tricks.com/snippets/jquery/get-x-y-mouse-coordinates/ .

Myślę że krótko wyjaśniłem jak uzyskać identyczny efekt, z tym że musisz to sam napisać :D.

Są już gotowe rozwiązania: https://www.jqueryscript.net/zoom/
Ten chyba spełni Twoje oczekiwanie

Kandif, świetny pomysł, muszę się trochę podszkolić co do jQuery, ponieważ jestem programistą php a nie jQuery. Dzięki. jawlo dzięki wielkie.