Skip to Content

Picture gallery for EP

First of all we need to iterate through km to find pictures for our gallery. To understand how this can be carried out follow this (very helpfull) Recursive processing in KM repositories: HierarchyWalker

Now we are to modify IResourceObserver implementation given there. All we need is just to remove code responsible for writing an output and change method observe so it could check if resource is an image and put it’s URI in array. Here is my solution:



Now, in the bean class we define List to store URIs and method to call HierarchyWalker:


package com.gazprom.jsp_dyn_page_imager;


import java.util.ArrayList;

import java.util.List;

import com.sapportals.portal.prt.component.AbstractPortalComponent;

import com.sapportals.portal.prt.component.IPortalComponentRequest;

import com.sapportals.portal.prt.component.IPortalComponentResponse;


import com.sapportals.wcm.repository.ResourceContext;

import com.sapportals.wcm.repository.ResourceException;

import com.sapportals.wcm.service.reporting.walker.HierarchyWalker;

public class jsp_imager_bean implements Serializable {

private List file_name;


  • @return


public List getFile_name() {

     return file_name;



  • @param string


public void setFile_name(List list) {

     file_name = list;


public List fill_filename(List ridList, ResourceContext ctx, int maxdepth)



          PrintResourceObserver observer;


          observer = new PrintResourceObserver(maxdepth);


          try {

               HierarchyWalker.getInstance(ridList, ctx, observer).walk();

          } catch (ResourceException e) {

               // TODO Auto-generated catch block


          } catch (InterruptedException e) {

               // TODO Auto-generated catch block




          return observer.filename_coll;          




In the jspdynpage class we instantiate bean and store HierarchyWalker provided results in it. We also check the request for input parameters (like in the blog mentioned) :



Now, in browse.jsp we must render our picture gallery. This can be easily done with assistance of galleria jQuery plugin (you can use another one, of course).

Following is my browse.jsp:


jQuery(function($) {
history: true,
clicknext: true,
insert: ‘#big_image’,
onImage: function(image,caption,thumb) { // let’s add some image effects for demonstration purposes

// fade in the image & caption
if(! ($.browser.mozilla && navigator.appVersion.indexOf(“Win”)!=-1) ) { // FF/Win fades large images terribly slow

// fetch the thumbnail container
var _li = thumb.parents(‘li’);

// fade out inactive thumbnail

// fade in active thumbnail

// add a title for the clickable image
image.attr(‘title’,’Next image >>’);
onThumb : function(thumb) { // thumbnail effects goes here

// fetch the thumbnail container
var _li = thumb.parents(‘li’);

// if thumbnail is active, fade all the way.
var _fadeTo =‘.active’) ? ‘1’ : ‘0.3’;

// fade in the thumbnail when finnished loading

// hover effects
function() { thumb.fadeTo(‘fast’,1); },
function() { _li.not(‘.active’).children(‘img’).fadeTo(‘fast’,0.3); } // don’t fade out if the parent is active














     .gallery li

     .gallery li.hover{border-color:#bbb;}


     .gallery li div

     .gallery li div .caption






     .info{text-align:left;margin:30px 0;border-top:1px dotted #221;padding-top:30px;clear:both;}

     .info p{margin-top:1.6em;}




  • html .galleria li div span /* MSIE bug */

    [« назад | #] | вперед »


You must be Logged on to comment or reply to a post.