PrimeFaces Extensions Showcase

ImageZoom

The basic configuration enables zooming in an Image. This component can also be used against Galleria.

Note that the xmlns:pt="http://xmlns.jcp.org/jsf/passthrough" namespace is needed for pt:data-zoom-src to work.

Source

XHTML page


                <p:growl id="growl" showDetail="true" sticky="true"/>

<p:graphicImage id="tibet"
                alt="Tibet"
                height="200"
                width="200"
                value="/resources/images/imagezoom/tibet-small.jpg"
                pt:data-zoom-src="/showcase-ext/resources/images/imagezoom/tibet-hd.jpg"/>

<pe:imageZoom for="tibet"/>

<p>Note that the <code>xmlns:pt="http://xmlns.jcp.org/jsf/passthrough"</code> namespace
is needed for <code>pt:data-zoom-src</code> to work.</p>

Use Cases

Documentation pe:imageZoom

Attributes (move mouse over the names to see data types)

Name	Description
id	Unique identifier of the component in a naming container.
rendered	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding	An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar	Name of the client side widget.
for	The target image.
margin	The space outside the zoomed image. Default is 0
scrollOffset	The number of pixels to scroll to close the zoom. Default is 40
background	The background color of the overlay. Default is #FFF
container	(Optional) The viewport to render the zoom in
template	(Optional) The template element to display on zoom