How to get the selected image from <p:galleria - jsf

Question

In this code,
<p:galleria value="#{Bean.images}" var="image" panelWidth="500" panelHeight="313" showCaption="true"
<p:graphicImage value="/images/galleria/#{image}" alt="Image Description for #{image}" title="#{image}"/
</p:galleria>
how do you get selectedImage? as expressed in
<p:carousel id="carousel" value="#{tableBean.carsSmall}" var="car" itemStyleClass="carItem" headerText="Cars">
<p:graphicImage id="image" value="/images/cars/#{car.manufacturer}.jpg"/>
<h:panelGrid columns="2" style="width:100%" cellpadding="5">
<h:outputText value="Model: " /><h:outputText id="model" value="#{car.model}" />
</h:panelGrid>
<p:commandLink id="view" update=":form:carDetail" oncomplete="carDialog.show()" title="View Detail">
<h:outputText styleClass="ui-icon ui-icon-search" style="margin:0 auto;" />
<f:setPropertyActionListener value="#{car}"
target="#{tableBean.selectedCar}" />
</p:commandLink>
</p:carousel>

Answer 1

Supposing you have a details button on each current displayed picture
(with alt attribute set to image filename)
<p:galleria value="#{Bean.images}" var="image">
<p:graphicImage value="/images/galleria/#{image}"/>
<f:facet name="content">
<p:graphicImage value="/images/galleria/#{image}" alt="#{image}" />
<span style="position:absolute;right:0;top:0;">
<p:commandButton styleClass="ui-icon ui-icon-search" onclick="jsCallRemote(this);" />
</span>
</f:facet>
</p:galleria>
Search button could call a js function passing the button himself as a hint to find the current image filename, and then call a remote command passing it the filename as a request parameter:
<script>
function jsCallRemote(btn) {
var imageFileName = btn.parentNode.parentNode.getElementsByTagName('img')[0].alt;
selectImage([{name:'imageFileName', value:imageFileName}]);
}
</script>
<p:remoteCommand name="selectImage" actionListener="#{tableBean.selectImage}" />
And the bean's method makes the actual selection through the request parameter imageFileName:
public void selectImage() {
String fileName = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("imageFileName");
// find image by filename...
}

Answer 2

In case you do not intend to have a button for each image you can take advantage of the galleria caption to catch the selected image title. This solution is based on the answer of andreea m.
<p:commandButton action="#{controller.preview}" value="Preview" onclick="checkSelectedImage();" oncomplete="PF('previewDialog').show();"/>
JS function
function checkSelectedImage() {
var caption = document.getElementsByClassName("ui-galleria-caption");
selectImage([{name:'imageFileName', value:caption[0].getElementsByTagName("h4")[0].innerHTML}]);
}
Remote command
<p:remoteCommand name="selectImage" actionListener="#{controller.selectImage}"/>