imageZoom

Pod-klasa Shop. Powiększenie zdjęcia produktu w miejscu - lupa.

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.

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.

Zachowanie imageZoom można modyfikować poprzez podmienienie, na własne, dwóch funkcji.

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 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;
}