How to use Primefaces galleria with user defined objects in jsf

I want to convert my current zoom gallery to Prime-faces galleria . I have following code .

1)profile.xhtml

<div class="profileImageDiv">
       <em:zoomGalleria showDocName="true" value="#{thumbImageMBean.documentReferenceThumbs}" />
        <a href="#{request.contextPath}/ui/ImageServlet?genericProfileDocRefId=#{generalEnquiryMBean.profileDocRefId}&amp;name=abc.jpg"
           class="group1">
          <h:graphicImage title="#{generalEnquiryMBean.profileDocRefId}"
                  value="/ui/ImageServlet?name=abc.jpg&amp;docRefId=#{generalEnquiryMBean.profileDocRefId}&amp;thumb=true"
                  alt="" width="137" height="138"/>
        </a>
      </div>

2) ThumbImageBean.java

@ManagedBean
@CustomScoped(value = "#{customScope}")
public class ThumbImageMBean extends BaseBean{


  ZoomGalleriaModel documentReferenceThumbs;

    public void setDocumentReferenceThumbs(ZoomGalleriaModel documentReferenceThumbs){
    this.documentReferenceThumbs = documentReferenceThumbs;
  }
 public ZoomGalleriaModel getDocumentReferenceThumbs() {
    return this.documentReferenceThumbs;
  }

3)ZoomgalleriaModel

 public class ZoomGalleriaModel {
  private List<GalleriaDocument> documentList;
  //setter getter 
    public void addGalleriaDocument(GalleriaDocument galleriaDocument){
    documentList.add(galleriaDocument);
  }

4)GalleriaDocument

  public class GalleriaDocument implements Serializable{

  private long docRefId;
  private String docDescription;
  private byte[] document;
  private Date documentDate;
  private String userName;
//setter and getter and constructor
  }

I tried to use Primefaces galleria with following code. PrimeFaces galleria code

<p:galleria value="#{thumbImageMBean.documentReferenceThumbs.documentList.toArray()}"     var="galleriaDoc" panelWidth="500" panelHeight="313" showCaption="true"> //primefaces galleria required array of string but i had List of objects   

    <p:graphicImage name="demo/images/nature/#{galleriaDoc}" alt="Image Description for #{galleriaDoc}" title="#{galleriaDoc}"/>
</p:galleria>

But it's not working, I am not JSF expert so ,thanks to every suggestion .

PS: PrimeFaces Version 3.0

Solution

Following code is working for me to show images in galleria , but description(title + date) is not showing . I am using PrimeFaces Version is 3.1

 <p:galleria value="#{thumbImageMBean.documentReferenceThumbs.documentList}" panelWidth="450" panelHeight="300"  var="galleriaDoc"  transitionInterval="0"
             styleClass="ui-widget-content ui-corner-all"  >
   <p:graphicImage  value="/ui/ImageServlet?name=abc.jpg&amp;docRefId=#{galleriaDoc.docRefId}"
                    name="#{galleriaDoc.userName}"
                    alt="Image Description for #{galleriaDoc.docRefId}"
                    title="#{galleriaDoc.documentDate}#{galleriaDoc.documentDate}"


   />
   <p:panel id="panel" header="Form" style="margin-bottom:10px;">
     <h:outputLabel value="#{galleriaDoc.userName} #{galleriaDoc.documentDate}"></h:outputLabel>
   </p:panel>


 </p:galleria>