The Photo Strip widget displays thumbnail versions of your digital photos in a scrollable horizontal or vertical strip that looks like a strip of film. This widget is based on the Prototype JavaScript library.
- Photostrips can be placed in horizontal or vertical direction
- Slide Navigation for up and down/ left to right movement
Add this code to the head section of the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css" title="currentStyle" media="screen">
@import '<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "theme","app","css.jsp?externalApp=true")%>';
@import '/photos/themes/<%=dekoh.photo.URLGenerator.staticContentVersion%>/pebbles/css.jsp';
</style>
<script src='/dekohportal/dwr/engine.js'></script>
<script src='/dekohportal/dwr/util.js'></script>
<script type="text/javascript" src="<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "common",null,"JSlibrary.jsp")%>">
</script>
<script type="text/javascript" src="/photos/widgets/<%=dekoh.photo.URLGenerator.staticContentVersion%>/lightboxEx/slideShow.js">
</script>
<script type="text/javascript" src="/photos/widgets/<%=dekoh.photo.URLGenerator.staticContentVersion%>/photoStrip/photoStrip.js">
</script>
Include the following code where you want to invoke the Photo Strip Widget in page:
<div id="photoStrip" style="width:140px;"></div>
The basic syntax to initialize the Dialog widget is
<script type="text/javascript">
//<![CDATA[
new PhotoStrip('photoStripVt',{dioId:'COLLECTION_DIO_ID',accessPath:'ACCESSPATH_TO_COLLECTION',photoStripImageCount:3, orientation:'vertical',ImageWidth:'100',ImageHeight:'100',ImageSize:'SQUARE_THUMB', linkUrl:'showphoto', targetDiv:'photoStrip'});
//]]>
</script>
| Options | Since | Description | Default |
|---|
| Id | V1.0 | Photostrip id | - |
| Options | Since | Description | Default |
|---|
| dioId | V 1.0 | The collection Id is set here | - |
| accessPath | V 1.0 | The accesspath of the collection | - |
| photoStripImageCount | V 1.0 | Number of the images to be shown in the photostrip | - |
| orientation | V 1.0 | The orientation can be ‘horizontal’ or ‘vertical’ | - |
| ImageWidth | V 1.0 | The thumbnail width | 100 |
| ImageHeight | V 1.0 | The thumbnail height | 100 |
| ImageSize | V 1.0 | The image size of the thumbnail to be loaded | - |
| linkUrl | V 1.0 | - | - |
| targetDiv | V 1.0 | The target element on the page where the photostrip is going to get loaded | 'photoStrip' |
| Function | Parameters | Description |
|---|
| getPhotoList | Obj- the photoStripImageObj object | Get the photo list |
| generatePhotoStripBounds | currentId- the current photo Id, count- the number of pictures to be shown | Generate the UI for the photostrip container |
| displayPhotoStripList | tempID, Id, ImageUrl, ImageLink, createPos- | Displays the photo strip photos |
| moveDown | - | Move the picture to the next available picture |
| moveUP | - | Move the picture to the previous available picture | |
Reference in web.xml
The DWR method mapping XML is given in web.xml
<init-param>
<param-name>config-slideshow</param-name>
<param-value>widgets/slideshowHTML/dwr-slideShowHTML.xml</param-value>
</init-param>
Slideshow widget is specific to photos applications. The above mapping is given in photos application web.xml.
<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
"http://www.getahead.ltd.uk/dwr/dwr10.dtd">
<dwr>
<allow>
<create creator="new" javascript="slideshow">
<param name="class" value="dekoh.photo.widget.slideshowhtml.SlideShow"/>
<include method="getSlideShowImages"/>
</create>
<convert converter="bean" match="dekoh.photo.widget.slideshowhtml.SlideShowImageObject"/>
</allow>
</dwr>
We need to ensure that all the parameters can be converted. Many of the types provided by the JDK are enabled for you, but you need to give DWR permission to convert your own bean. Generally this means that JavaBean parameters will need a <convert ...> entry.
- Convert-class: dekoh.photo.widget.slideshowhtml.SlideShowImageObject
- Description: DWR transfer object holding the slide show photo object metadata.
Each class on which we execute methods, needs a <create ...> entry. There are several types of creator. The most common ones use either the 'new' keyword or the Spring framework. For more information, see the Creator documentation.
- ClassName: dekoh.photo.widget.slideshowhtml.SlideShow
- Description: Class to serve all list of slideshow objects for the given collection.
| Method Name | Functionality |
|---|
| getSlideShowImages | Get the list sildeshowImageObejects for the given collection. |
Dekoh Portal Ver 0.4.2 or later.
