ImageZoom - Zoom product photo Print

  • 3

In-class Shop. Enlarged product images in place - Magnifier.

The parameters in the JS

Because the class is assigned to the Shop, all parameters must be set before the domready event or the latest featuresconditional Shop.imageZoom.condition()

Parameters Shop.imageZoom.options :

  • img (object DOM) - product photo
  • inner (bool) - true If the increase is expected in the area already displayed photos, false If next to the
  • container_class (string) - class that receives the object that contains the enlarged photos, by default, imagezoom
  • shade_class (string) - class that receives the object that creates „shadow”, used only when inner == false
  • transbox_class (string) - class which receives more than „shadow” that represents the currently displayed area, used only when inner == false

imageZoom in order to find full address photos Gets href parent. In product shots are always in cross-references <a>. They are used by the Gallery Milkbox.

Action

Object img receives event onMouseenter in which the object is created with the container_class (and possibly other). Automatic operation, does not require additional action.

Behavior modification

The behavior, you can modify the swap through imageZoom since it doesn't, on its own, the two functions.

Shop.imageZoom.sidebox_size

Used when inner == false function Shop.imageZoom.sidebox_size receives:

  • oimg (object DOM) - miniature img
  • sidediv (object DOM) - full container photos
  • divimg (object DOM) - <img> with full photo

and returns an object {}, which specifies the size and position (Absolute) sidediv:

  • left
  • top
  • width
  • height

The standard behaviour of the size the same as the oimg, While the position on the right from the sparse 10 pixels.

        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 receives two parameters:

  • (float) - z range from 0.0 to 1.0
  • inner (bool) - information about the operation imageZoom

and returns (float) in the range 0.0 to 1.0. It is called for both axes (X / Y) and returns the offset of the cursor relative to the upper left corner of the photos.

The standard behaviour of the transformation x power function (^2 for x < 0.5 and ^0.5 for x > 0.5). As a result, the boundaries of the enlarged pictures are much more quickly attainable and you must overcome your smaller distance.

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

Was this answer helpful?

« Back