Będąc dzieckiem posiadałem plastikowy mikroskop produkcji СССР. To, że był takiej produkcji i z takiego materiału, nie przeszkadzało, aby dostarczał ogromną frajdę. Oczywiście trzeba było podejrzeć włos, powiększenie kartki pomazanej długopisem czy też źdźbło trawy. Kawałek plastiku i szkiełka pozwalał w jednej chwili przenieść się do fascynującego mikroświata. Dziś też przeniesiemy się na chwilę w taki świat.
Przybliżenie.
Stworzymy prosty plugin do powiększania zdjęcia po najechaniu myszą, choć ze względu na jego prostotę trudno nazwać go pluginem. Będziemy potrzebować oczywiście zdjęcia. Wykorzystamy właściwości object-fit oraz object-position, o których pisałem we wpisie Upychanie walizki, czyli o właściwości object-fit i object-position. Na początek, przed najechaniem myszą zawartość naszego obrazka wtłoczymy w element wykorzystując wartość contain. Po najechaniu zmieniamy ją na none, dzięki temu zawartość nie jest skalowana, ale obszar nadal ma ustalone w CSS wymiary. W skrypcie JS natomiast ustalamy wartość dla object-position.
<img src="mario-1557240_1920.jpg" />
+
/* nasze "pomniejszenie" */
img {
width: 480px;
height: 320px;
background: #000;
object-fit: contain;
}
/* po najechaniu myszą
zawartość obrazka
przyjmie oryginalne
rozmiary
*/
img:hover {
object-fit: none;
}
+
/* w e.offsetX/Y mamy położenie myszy
względem obrazka, a offsetWidth/Height
to rozmiary naszego "pomniejszenia",
przesunięcie to po prostu proporcja
*/
document.querySelector("img").addEventListener("mousemove", function(e) {
this.style.objectPosition =
(e.offsetX / this.offsetWidth) * 100 + "% " +
(e.offsetY / this.offsetHeight) * 100 + "%";
});
I efekt:
Zobacz jednak co się dzieje kiedy zjedziesz myszą z obrazka. Położenie zawartości pozostaje takie jak przy najechaniu, a chcielibyśmy aby ta wracała do swojej pierwotnej pozycji, czyli była wyśrodkowana. Jeśli dodamy do CSS dla IMG:
object-position: 50% 50%;
to nic to nie zmieni, bo i tak nadpisujemy style jako inline poprzez JS. Ominiemy to dodając !important, ale wtedy style inline nie będa mieć w ogóle wpływu na położenie - zawartość będzie wciąż wyśrodkowana, nawet przy poruszaniu myszą. Hmm...
Bez szkiełka nakrywkowego.
Już raz wykorzystaliśmy trik, który i teraz będzie pomocny. Mamy selektor img{ }, mamy selektor img:hover{ }, ale mamy też selektor img:not(:hover){ }! Ten ostatni dotyczy tylko i wyłącznie stanu kiedy nad obrazkiem nie ma wskaźnika, w przeciwieństwie do pierwszego selektora, który dotyczy obydwu stanów.
Dodajemy więc do CSS:
img:not(:hover) {
object-position: 50% 50% !important;
}
i nadpiszemy w ten sposób style inline tylko i wyłącznie kiedy wskaźnik nie nachodzi na obrazek.
Jak pewnie zauważyłeś cały czas opieramy się na jednym obrazku, co niekoniecznie jest optymalne, bo duży potrzebujemy tylko dla celów powiększenia (chyba, że masz pewność, że powiększenie będzie używane zawsze), więc mały mógłby stanowić fizycznie inny plik - zdjęcie o mniejszej rozdzielczości. Nic nie stoi na przeszkodzie, aby delikatnie zmodyfikować skrypt (nadal będzie "miniaturowy"), tak aby podmieniał źródło w trakcie najechania myszą. To już pozostawiam Tobie, Czytelniku.
Czy nie dostrzegasz mniejszej ilości kodu w porównaniu do ulubionego pluginu jQuerySuperExtraMegaZoom?
Przydatne linki:
Upychanie walizki, czyli o właściwości object-fit i object-position