imageZoom
Pod-klasa Shop. Powiększenie zdjęcia produktu w miejscu - lupa.
Parametry w JS
Ponieważ klasa jest inicjalizowana razem z Shop, wszystkie parametry należy nadać przed zdarzeniem domready lub najpóźniej w funkcji warunkowej Shop.imageZoom.condition()
Parametry Shop.imageZoom.options :
- img (obiekt DOM) - zdjęcie produktu
- inner (bool) - true jeżeli powiększenie ma nastąpić w obszarze już wyświetlanego zdjęcia, false jeżeli obok
- container_class (string) - klasa którą otrzyma obiekt zawierający powiększone zdjęcia, domyślnie imagezoom
- shade_class (string) - klasa którą otrzyma obiekt tworzący „cień”, używane tylko kiedy inner == false
- transbox_class (string) - klasa którą otrzyma ponad „cieniem” oznaczający aktualnie wyświetlany obszar, używane tylko kiedy inner == false
imageZoom w celu znalezienia adresu pełnego zdjęcia pobiera href rodzica. W aplikacji zdjęcia produktów znajdują się zawsze w odsyłaczach <a>. Są one używane przez galerię Milkbox.
Działanie
Obiekt img otrzymuje zdarzenie onMouseenter w którym tworzony jest obiekt z container_class (i ewentualnie pozostałe). Działanie automatyczne, nie wymaga dodatkowych akcji.
Modyfikacja zachowania
Zachowanie imageZoom można modyfikować poprzez podmienienie, na własne, dwóch funkcji.
Shop.imageZoom.sidebox_size
Wykorzystywana kiedy inner == false funkcja Shop.imageZoom.sidebox_size otrzymuje:
- oimg (obiekt DOM) - miniatura img
- sidediv (obiekt DOM) - kontener pełnego zdjęcia
- divimg (obiekt DOM) - <img> z pełnym zdjęciem
a zwraca obiekt {}, który określa rozmiar i pozycję (absolutą) sidediv:
- left
- top
- width
- height
Standardowe zachowanie funkcji to rozmiar taki sam jak oimg, natomiast pozycja na prawo z odstępem 10 pikseli.
Shop.imageZoom.sidebox_size = function(oimg, sidediv, divimg) { var c = oimg.getComputedSize(); var p = oimg.getPosition(); return { left : p.x + c.width + 10, top : p.y, width : c.width, height : c.height }; }
Shop.imageZoom.transform
Shop.imageZoom.transform otrzymuje dwa parametry:
- x (float) - z przedziału od 0.0 do 1.0
- inner (bool) - informacja o trybie działania imageZoom
a zwraca (float) z przedziału 0.0 do 1.0. Wywoływana jest dla obydwu osi ( X / Y ) i podaje przesunięcie kursora w stosunku do górnego lewego rogu zdjęcia.
Standardowe zachowanie to transformacja x przez funkcję potęgową (^2 dla x < 0.5 i ^0.5 dla x > 0.5). Dzięki temu, granice zdjęcia powiększonego są znacznie szybciej osiągalne i użytkownik musi pokonywać kursorem mniejszy dystans.
Shop.imageZoom.transform = function(x, inner) { if(false == inner) return x; if(x < 0.5) { x = 3 * x * x - 1/4; // [ (2x)^2 / (4/3) ] - (1/3) } else { x = Math.sqrt(x - 0.5) * 1.5 + 0.5; } if(x >= 1) return 1; if(x <= 0) return 0; return x; }