Mitkees & Webcenter

Into the charm of Oracle Webcenter and ADF

Tag Archives: fancybox

Create image gallery in webcenter portal using content presenter templates


Best way to  develop Image gallery for  webcenter portal

1- Create a folder in UCM

2- Upload your Images under  this folder

3- create a content presenter template that use css & jquery .. I used fancy box component for the image gallery.


<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1" xmlns:af="http://xmlns.oracle.com/adf/faces/rich" xmlns:dt="http://xmlns.oracle.com/webcenter/content/templates" xmlns:f="http://java.sun.com/jsf/core" xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:fn="http://java.sun.com/jsp/jstl/functions" xmlns:ui="http://java.sun.com/jsf/facelets">

<af:resource type="css" source="/../fancybox/jquery.fancybox.css"/>
<af:resource type="javascript" source="/../fancybox/jquery.fancybox.js"/>
<af:resource type="javascript" source="/../fancybox/jquery.fancybox.pack.js"/>
<af:resource type="javascript" source="/../fancybox/jquery.mousewheel-3.0.4.pack.js"/>
<af:resource type="css">
#content {
width: 400px;
margin: 40px auto 0 auto;
padding: 0 60px 30px 60px;
border: solid 1px #cbcbcb;
background: #fafafa;
-moz-box-shadow: 0px 0px 10px #cbcbcb;
-webkit-box-shadow: 0px 0px 10px #cbcbcb;
}

h1 {
margin: 30px 0 15px 0;
font-size: 30px;
font-weight: bold;
font-family: Arial;
}

h1 span {
font-size: 50%;
letter-spacing: -0.05em;
}

hr {
border: none;
height: 1px; line-height: 1px;
background: #E5E5E5;
margin-bottom: 20px;
padding: 0;
}

p {
margin: 0;
padding: 7px 0;
}

a {
outline: none;
}

img.gallery {
border: 1px solid #BBB;
padding: 2px;
margin: 10px 20px 10px 0;
vertical-align: top;
}

a img.last {
margin-right: 0;
}

ul {
margin-bottom: 24px;
padding-left: 30px;
}
</af:resource>
<f:verbatim/>
<dt:contentListTemplateDef var="nodes">
<af:popup id="cpPopup" eventContext="launcher" contentDelivery="lazyUncached" launcherVar="source">
<af:setPropertyListener type="popupFetch" from="#{node}" to="#{requestScope.oracleCPPopupCurrentNode}"/>
<af:noteWindow id="cpNw">
<dt:contentTemplate node="#{requestScope.oracleCPPopupCurrentNode}" view="oracle.webcenter.content.templates.default.document.details" nodesHint="#{nodes}" id="ctmv1"/>
</af:noteWindow>
</af:popup>
<af:panelGroupLayout id="images-wrapp" styleClass="images-wrapp">
<af:iterator rows="0" var="node" varStatus="iterator" value="#{nodes}" id="it0">
<af:panelGroupLayout id="imageitem" styleClass="image-item">
<af:outputText escape="false" value="&lt;a class=&quot;grouped_elements&quot; title=&quot;#{node.propertyMap['xComments'] != 'xComments: ' ? node.propertyMap['xComments'].asTextHtml : node.propertyMap['dDocTitle'].value.stringValue}&quot; rel=&quot;group&quot; href=&quot;#{WCAppContext.applicationURL}/../cs/idcplg?IdcService=GET_FILE&amp;dID=#{node.propertyMap['dID'].value}&amp;dDocName=OWCVM03_#{fn:toLowerCase(node.id.uid)}&amp;allowInterrupt=1&amp;ext=.jpg&quot;>"/>
<af:image source="#{WCAppContext.applicationURL}/../cs/idcplg?IdcService=GET_FILE&amp;dDocName=#{node.propertyMap['dDocTitle'].value}&amp;dID=#{node.propertyMap['dID'].value}&amp;RevisionSelectionMethod=specific&amp;Rendition=Preview&amp;allowInterrupt=1" styleClass="gallery"/>
<af:outputText escape="false" value="&lt;/a>"/>
</af:panelGroupLayout>
</af:iterator>
</af:panelGroupLayout>
</dt:contentListTemplateDef>
</jsp:root>

5- add content presenter to your page where the content is “content under folder”& template the one created in the step above.

%d bloggers like this: