Categories

.uiMagnifier()

Categories: UI

.uiMagnifier( [ options ] )

Subclass: ep

Inherit: (Subclass: ep) .widget()

Plugin: ep.ui.magnifier

Description: Adding magnifier function to an image

  • .uiMagnifier( [ options ] )

    version added: 6.12.0

    options   A map of additional options pass to the method.

The .uiMagnifier() widget adds a magnifier to an preview image. The magnified image is passed as additional option and will be shown in a magnified area.

The dimensions of the magnifier mover depends on the dimensions of the magnified image, the magnified area and the preview image.

  • Add a magnifier on the right side of an image.

    HTML:
    <img src="Image.jpg" name="Bild" alt="Bild" id="image" />
    
    Code:
    ep('#image').uiMagnifier({
      'magnifiedPicture':'magnifiedImage.jpg',
      'magWidth': 200,
      'magHeight': 200,
      'dir': 'right'
    });
    
    
  • magnifiedPicture

    version added: 6.12.0

    Specifies path and name of the file containing the magnified image.

    Default: empty string

  • magWidth

    version added: 6.12.0

    Width of the magnified area.

    Default: 200

  • magHeight

    version added: 6.12.0

    Height of the magnified area.

    Default: 200

  • magBorder

    version added: 6.12.0

    CSS string defining the border of the magnifier mover.

    Default: 1px solid #aaa

  • magBG

    version added: 6.12.0

    CSS string defining the background of the magnifier mover.

    Default: #fff

  • magOpac

    version added: 6.12.0

    Number from 0 to 1 defining the opacity of the magnifier mover.

    Default: 0.6

  • dir

    version added: 6.12.0

    Direction where the magnified area is shown relative to the preview image. (posible values 'left', 'right', 'center')

    Default: right

  • zIndex

    version added: 6.12.0

    Number defining the layer position of the magnified area.

    Default: 9999

  • slideshow

    version added: 6.12.0

    An object representing a ep.uiSlideshow.

    Default: null

  • setImage

    • .uiMagnifier('setImage', newPreviewImage, newMagnifiedImage)

      version added: 6.12.0

      newPreviewImage   Specifies path and name of the file containing the new preview image.

      newMagnifiedImage   Specifies path and name of the file containing the new magnified image.

    Setting a new preview and magnified image.