Elevatezoom com <p:dialog/> do JSF

Programação Java
#1

Estou querendo incluir o zoomtype = “lens” em um dialog de um form, só que o zoom aparece por baixo do dialog.

Alguém sabe como faço para o zoom ficar sobre a imagem do dialog ???

J-query - elevate zoom

    <script src="/samtWebAlpha/resources/engebras/javascripts/jquery.elevatezoom.js"></script>  
    <script>
        $("#zoom_lente").elevateZoom({
        zoomType: "lens",
        lensShape: "round",
        lensSize: 300
        });
    </script>

*-------
dialog
<p:dialog header=“Zoom da Imagem” id=“dialogZoomImagem” widgetVar=“dial_ZoomImagem” modal=“true” height=“750” width=“790”>

                <h:outputText value="Imagem:" />
                
                    <p:growl id="msg2" showDetail="true" />
                    <h:panelGrid columns="1" id="panelZoomImagem" style="height: 550px">
                        <img id="zoom_lente" src='/samtWebAlpha/resources/upload/image_teste.JPG' data-zoom-image="/samtWebAlpha/resources/upload/image_zoom.JPG"/>  
                    </h:panelGrid>    
                    <p:panelGrid columns="2" id="panelDescricaoZoomImagem">
                        <p:outputLabel for="imagemZoom" value="Imagem: "/>
                        <p:inputText id="imagemZoom" value="#{mbDigitacaoPlacas.imagemObliteracao}" size="86" disabled="true"/>
                    </p:panelGrid>
                
                <p:toolbar>
                    <p:toolbarGroup align="center">
                            <div align="center">
                            <p:commandButton value="Voltar"  onclick="PF('dial_ZoomImagem').hide();" update="imagemInfracao msg2" icon="ui-icon-arrowreturnthick-1-s" style="width: 100px"/>
                            </div>    
                    </p:toolbarGroup>
                </p:toolbar>
            </p:dialog>