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

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

Source

                <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>
            
Components and more
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
PrimeFaces Extensions Showcase - © 2011-2021,PrimeFaces: 11.0.0,PrimeFaces Extensions: 11.0.3,JSF: Apache MyFaces JSF-2.3 Core API 2.3.9,Server: jetty/9.4.36.v20210114,Build time: 2022-04-17 14:55
occured!