media.xhtml does not work in the my project

Forum rules
Please note that response time for technical support is within 3-5 business days.
Post Reply
silviogs
Posts: 3
Joined: 11 Apr 2016, 16:43

18 Jun 2022, 00:41

Hi friends

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>
I've tried some changes and nothing works.

Could anyone help?

Silvio Guedes

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

18 Jun 2022, 01:15

Hi,

Could you please attach a screenshot for us? Also, can you check the icons' font-family in the browser's inspector?

Post Reply

Return to “Siberia - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 4 guests