I can't make p:galleria work in my project, the navigation buttons and the close button don't appear.
https://www.primefaces.org/siberia/media.xhtml --> it works
Code: Select all
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:sc="http://primefaces.org/ui/showcase"
lang="en">
<h:head>
<f:facet name="first">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="shortcut icon" type="image/x-icon" href="#{request.contextPath}/siberia-layout/images/favicon.ico" />
</f:facet>
<title><ui:insert name="title">Sistema de Gestão Imobiliária</ui:insert></title>
<link rel="stylesheet" href="#{request.contextPath}/resources/primeflex/primeflex.css"/>
<link rel="stylesheet" href="#{request.contextPath}/resources/layout2/layout2.css"/>
<link rel="stylesheet" href="#{request.contextPath}/resources/layout2/galleria.css"/>
<link rel="stylesheet" href="#{request.contextPath}/resources/layout2/components.css"/>
<script type="text/javascript" src="#{request.contextPath}/resources/layout2/0-galleriathumbnail.js"></script>
<script type="text/javascript" src="#{request.contextPath}/resources/layout2/js.js"></script>
<script type="text/javascript" src="#{request.contextPath}/resources/layout2/jquery-plugins.js"></script>
<script type="text/javascript" src="#{request.contextPath}/resources/layout2/touchswipe.js"></script>
<script type="text/javascript" src="#{request.contextPath}/resources/layout2/components.js"></script>
<script type="text/javascript" src="#{request.contextPath}/resources/layout2/core.js"></script>
<h:outputScript name="js/layout.js" library="siberia-layout" />
<h:outputScript name="js/prism.js" library="siberia-layout"/>
<h:outputScript name="js/sections.js" library="demo" />
<h:outputScript name="script/layout.js" library="showcase" />
<h:outputScript name="showcase/script/prism.js" />
<ui:insert name="head"/>
</h:head>
<h:body styleClass="#{guestPreferences.inputStyleClass}">
<div class="layout-wrapper #{guestPreferences.menuMode} layout-#{guestPreferences.layout}
#{guestPreferences.menuMode eq 'layout-static' ? 'layout-static-active' : ''}">
<ui:include src="./topbar.xhtml"/>
<ui:include src="./rightpanel.xhtml"/>
<ui:include src="./config.xhtml" />
<div class="layout-main">
<div class="layout-content">
<ui:insert name="content"/>
</div>
<ui:include src="./footer.xhtml"/>
<div class="layout-mask"></div>
</div>
<p:ajaxStatus style="width:32px;height:32px;position:fixed;right:7px;bottom:7px">
<f:facet name="start">
<i class="pi pi-spin pi-spinner layout-ajax-loader-icon" aria-hidden="true"/>
</f:facet>
<f:facet name="complete">
<h:outputText value=""/>
</f:facet>
</p:ajaxStatus>
</div>
<h:outputStylesheet name="css/primeicons.css" library="siberia-layout"/>
<h:outputStylesheet name="css/primeflex.min.css" library="siberia-layout"/>
<h:outputStylesheet name="css/demo.css" library="demo"/>
<h:outputStylesheet name="css/layout-#{guestPreferences.layout}.css" library="siberia-layout" />
<h:outputStylesheet name="css/layout/layout.css" library="showcase"/>
</h:body>
</html>
Code: Select all
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
template="/WEB-INF/template.xhtml">
<ui:define name="content">
<h:form>
<p:remoteCommand name="rc" actionListener="#{galleriaView.changeActiveIndex}" update="custom" oncomplete="PF('galleria3').show()" />
<div class="card">
<div class="ui-g ui-fluid">
<div class="ui-g-12 ui-md-4">
<p:graphicImage value="/resources/demo/images/nature/nature1.jpg" alt="#{photo.alt}" />
</div>
<div class="ui-g-12 ui-md-4">
<p:graphicImage value="/resources/demo/images/nature/nature2.jpg" alt="#{photo.alt}" />
</div>
<div class="ui-g-12 ui-md-4">
<p:graphicImage value="/resources/demo/images/nature/nature3.jpg" alt="#{photo.alt}" />
</div>
</div>
</div>
<div class="card">
<h5>Positioned at Bottom</h5>
<p:galleria value="#{galleriaView.photos}" var="photo"
numVisible="5" responsiveOptions="#{galleriaView.responsiveOptions1}"
style="max-width: 640px">
<p:graphicImage value="#{photo.itemImageSrc}"
alt="#{photo.alt}" style="width: 100%; display: block" />
<f:facet name="thumbnail">
<p:graphicImage value="#{photo.thumbnailImageSrc}"
alt="#{photo.alt}" style="width: 100%; display: block" />
</f:facet>
</p:galleria>
</div>
<div class="card">
<p:galleria value="#{imagesView.images}" var="image" numVisible="6" showItemNavigators="true" circular="true" showItemNavigatorsOnHover="true" showIndicators="true">
<p:graphicImage value="#{image}" alt="Image Description for #{image}" panelWidth="500" panelHeight="313" />
<f:facet name="thumbnail">
<p:graphicImage value="/resources/demo/images/nature/#{image}" alt="Image Description for #{image}" />
</f:facet>
</p:galleria>
</div>
<div class="card">
<h5>With Thumbnails</h5>
<p:galleria widgetVar="galleria1" value="#{galleriaView.photos}" var="photo" numVisible="9" responsiveOptions="#{galleriaView.responsiveOptions3}"
circular="true" fullScreen="true" showItemNavigators="true" style="max-width: 50%">
<p:graphicImage value="#{photo.itemImageSrc}" alt="#{photo.alt}" style="width: 100%; display: block" />
<f:facet name="thumbnail">
<p:graphicImage value="#{photo.thumbnailImageSrc}" alt="#{photo.alt}" style="display: block" />
</f:facet>
</p:galleria>
<p:commandButton value="Show" icon="pi pi-external-link" onclick="PF('galleria1').show()" />
</div>
<div class="card">
<h5>Without Thumbnails</h5>
<p:galleria widgetVar="galleria2" value="#{galleriaView.photos}" var="photo" numVisible="7" responsiveOptions="#{galleriaView.responsiveOptions1}"
circular="true" fullScreen="true" showItemNavigators="true" showThumbnails="false" style="max-width: 850px">
<p:graphicImage value="#{photo.itemImageSrc}" alt="#{photo.alt}" style="width: 100%; display: block" />
</p:galleria>
<p:commandButton value="Show" icon="pi pi-external-link" onclick="PF('galleria2').show()" />
</div>
<div class="card">
<h5>Custom Content</h5>
<p:galleria id="custom" widgetVar="galleria3" value="#{galleriaView.photos}" var="photo" activeIndex="#{galleriaView.activeIndex}" numVisible="7" responsiveOptions="#{galleriaView.responsiveOptions1}"
circular="true" fullScreen="true" showItemNavigators="true" showThumbnails="false" style="max-width: 850px">
<p:graphicImage value="#{photo.itemImageSrc}" alt="#{photo.alt}" style="width: 100%; display: block" />
</p:galleria>
<div class="p-grid" style="max-width: 400px">
<ui:repeat value="#{galleriaView.photos}" var="photo" varStatus="status">
<div class="p-col-3">
<p:graphicImage value="#{photo.thumbnailImageSrc}" alt="#{photo.alt}" style="cursor: pointer" onclick="rc([{'name': 'index', 'value': #{status.index} }])" />
</div>
</ui:repeat>
</div>
</div>
</h:form>
</ui:define>
</ui:composition>
Code: Select all
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui"
template="/WEB-INF/template.xhtml">
= <ui:param name="documentationLink" value="/components/galleria"/>
<ui:param name="widgetLink" value="Galleria"/>
<h:outputStylesheet name="css/primeflex2.css" library="showcase"/><!-- classic PrimeFlex 2 for backward-compatibility -->
<h:outputStylesheet name="css/primeflex3.css" library="showcase"/><!-- latest primeflex -->
<h:outputStylesheet name="css/flags/flags.css" library="showcase"/>
<h:outputScript name="/resources/layout2jquery.js" library="primefaces"/>
<h:outputScript name="/resources/layout2/jquery-plugins.js" library="primefaces"/>
<style type="text/css">
body .custom-indicator-galleria .ui-galleria-indicators {
padding: 1rem .25rem 1rem 0;
}
body .custom-indicator-galleria .ui-galleria-indicator {
width: 100%;
text-align: right;
font-weight: bold;
padding: .357rem .75rem .357rem .75rem;
margin-bottom: 0 !important;
}
body .custom-indicator-galleria .ui-galleria-indicator {
color: #e9ecef;
background-color: transparent;
cursor: pointer;
transition: background-color 0.2s, color 0.2s;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
body .custom-indicator-galleria .ui-galleria-indicator.ui-state-highlight {
background-color: var(--primary-color);
color: var(--primary-color-text);
}
</style>
<ui:define name="content">
<h:form id="myform">
<p:remoteCommand name="rc" actionListener="#{galleriaView.changeActiveIndex}" update=":myform:custom" oncomplete="PF('galleria3').show()" />
<div class="card">
<h5>With Thumbnails</h5>
<p:galleria widgetVar="galleria1" value="#{galleriaView.photos}" var="photo" numVisible="9" responsiveOptions="#{galleriaView.responsiveOptions3}"
circular="true" fullScreen="true" showItemNavigators="true" style="max-width: 50%">
<p:graphicImage value="#{photo.itemImageSrc}" alt="#{photo.alt}" style="width: 100%; display: block" />
<f:facet name="thumbnail">
<p:graphicImage value="#{photo.thumbnailImageSrc}" alt="#{photo.alt}" style="display: block" />
</f:facet>
</p:galleria>
<p:commandButton value="Show" icon="pi pi-external-link" onclick="PF('galleria1').show()" />
</div>
<div class="card">
<h5>Custom Content</h5>
<p:galleria id="custom" widgetVar="galleria3" value="#{galleriaView.photos}" var="photo" activeIndex="#{galleriaView.activeIndex}" numVisible="7" responsiveOptions="#{galleriaView.responsiveOptions1}"
circular="true" fullScreen="true" showItemNavigators="true" showThumbnails="false" style="max-width: 850px">
<p:graphicImage value="#{photo.itemImageSrc}" alt="#{photo.alt}" style="width: 100%; display: block" />
</p:galleria>
<div class="grid" style="max-width: 400px">
<ui:repeat value="#{galleriaView.photos}" var="photo" varStatus="status">
<div class="col-3">
<p:graphicImage value="#{photo.thumbnailImageSrc}" alt="#{photo.alt}" style="cursor: pointer" onclick="rc([{'name': 'index', 'value': #{status.index} }])" />
</div>
</ui:repeat>
</div>
</div>
<div class="card">
<h5>Indicators with Click Event</h5>
<p:galleria value="#{galleriaView.photos}" var="photo" numVisible="5" responsiveOptions="#{galleriaView.responsiveOptions1}"
showThumbnails="true" showIndicators="true" style="max-width: 640px">
<p:graphicImage value="#{photo.itemImageSrc}" alt="#{photo.alt}" style="width: 100%; display: block;" />
<f:facet name="thumbnail">
<p:graphicImage value="#{photo.thumbnailImageSrc}" alt="#{photo.alt}" style="display: block" />
</f:facet>
</p:galleria>
</div>
</h:form>
</ui:define>
</ui:composition>
Could anyone help?
Silvio Guedes