Image Zoom

From Wiki openElement
Jump to: navigation, search
Path: Elements / Interactivity / Image Zoom

Contents

Description

The Image Zoom element is a Lightbox-style element that displays an image or other content in a modal window (the page is greyed out and an in-page pop-up appears until the user closes it). It is ideal for enlarging a thumbnail image.

Example:

Element apercuZoom.png

This element can also be used to create an image gallery.

Add an Image Zoom Element

Drag-and-Drop the element Image Zoom from the elements menu anywhere on the page.
The configuration menu will open automatically.

Configuration

Element ConfigurationZoom.png

(1) Add an image to the element "Image Zoom"
(2) Modify an image's properties (an image must be selected)
(3) Delete an image (an image must be selected)
(4) Preview of images already added to the element "Image Zoom"

Element ZoomEtape1.png

From the first screen, choose which image should trigger the "Image Zoom" upon clicking.

Element ZoomEtape2.png

(1) Preview of the selected image
(2) Select a local image
(3) Give the image a title
(4) Associate a hyperlink with the image
(5) Add a comment/description to the image

Design and Presets

To change its appearance, users must override the element's various style zones.

Style zoom img1.png Window
Default Value:
Background Color: #FFFFFF

Style zoom img2.png Close Button
Default Value:
Default Image: Zoom img01.png
Height: 24px
Width: 24px
Cursor: Main
Right Distance: -20px
Left Distance: -20px

Style zoom img3.png Right Navigation Button
Default Value:
Default Image: Zoom img02.png
Image Repetition: Fixed
Height: 24px
Width: 24px
Cursor: Main
Right Distance: -7px
Top Distance: 50%

Style zoom img4.png Left Navigation Button
Default Value:
Default Image: Zoom img03.png
Image Repetition: Fixed
Height: 24px
Width: 24px
Cursor: Main
Left Distance: -5px
Top Distance: 50%

Style zoom img5.png Title
Default Value:
No style by default

Style zoom img6.png Description
Default Value:
No style by default

Link
Default Value:
No style by default

Overlay
Default Value:
Background Color: #000000
Opacity: 80

Personal tools
Namespaces

Variants
Views
Actions
openElement
Community
Toolbox