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.io.Serializable;
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.portal.security.usermanagement.UserManagementException;
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;
/**
*/
public List getFile_name() {
return file_name;
}
/**
*/
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
e.printStackTrace();
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
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($) {
$('ul.gallery').galleria(
{
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
image.css('display','none').fadeIn(1000);
}
caption.css('display','none').fadeIn(1000);
// fetch the thumbnail container
var _li = thumb.parents('li');
// fade out inactive thumbnail
_li.siblings().children('img.selected').fadeTo(500,0.3);
// fade in active thumbnail
thumb.fadeTo('fast',1).addClass('selected');
// 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 = _li.is('.active') ? '1' : '0.3';
// fade in the thumbnail when finnished loading
thumb.css({display:'none',opacity:_fadeTo}).fadeIn(1500);
// hover effects
thumb.hover(
function() { thumb.fadeTo('fast',1); },
function() { _li.not('.active').children('img').fadeTo('fast',0.3); } // don't fade out if the parent is active
)
}
}
);
});
/* BEGIN DEMO STYLE */
*
body
h1,h2
a
a:hover
.caption
.pictures
.gallery
.gallery li
.gallery li.hover{border-color:#bbb;}
.gallery li.active{border-style:solid;border-color:#222;}
.gallery li div
.gallery li div .caption
#big_image
//.nav{padding-top:15px;clear:both;}
.info{text-align:left;margin:30px 0;border-top:1px dotted #221;padding-top:30px;clear:both;}
.info p{margin-top:1.6em;}
.nav
[« назад | #] | вперед »
INFO
