The Slide Show widget is a simple, unobtrusive script used to overlay images on the current page, display sets of images and create slide shows using your favorite photos. The widget is based on the Prototype JavaScript library and LightboxEx JS slideshow (http://ahavriluk.home.comcast.net/lightboxEx/doc/), and works on all modern browsers.
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>
Include the following code where you want to invoke the Collection Manager in page:
<span onclick="dSS.startSlideshow();" class="dekoh_ST_actionButton" id="dekoh_actionButton_slideshow" title="View Slideshow"></span>
The basic syntax to initialize the Slide Show widget is
<script type="text/javascript">
//<![CDATA[
dSS =new dekohSlideShow('dSS', {dioColId:'8',ImageSize:'Medium', currentPhoto:'PHOTO_ID_FROM_WHERE_THE_SLIDESHOW_WILL_START'});
//]]>
</script>
Add this code to the head section of the page:
<style type="text/css" title="currentStyle" media="screen">
@import "<%=dekoh.portal.util.StaticFilesURLGenerator.generateStaticFileURL(request, "theme","app","css.jsp?externalApp=true")%>";
</style>
<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/swfobject.js"></script>
<script type="text/javascript" src="/photos/widgets/<%=dekoh.photo.URLGenerator.staticContentVersion%>/lightboxEx/Sound.js"></script>
<script type="text/javascript" src="/photos/widgets/<%=dekoh.photo.URLGenerator.staticContentVersion%>/lightboxEx/lightboxEx.js"></script>
Include this code in the page:
<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
Add a rel="lightbox" attribute to any link tag to activate the lightbox. If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute.
You may check the document at http://ahavriluk.home.comcast.net/lightboxEx/doc/ for any further requirements.
| Options | Since | Description | Default |
|---|
| id | V1.0 | The id of | - |
| Options | Since | Description | Default |
|---|
| dioColId | V1.0 | The collection Id | null |
| ImageSize | V1.0 | The image size can be set as 'MEDIUM','SMALL','THUMB' | MEDIUM |
| currentPhoto | V1.0 | The photo from where you want to start the slideshow | null | |
| Function | Parameters | Description |
|---|
| getSlideShowImg | dioColId- the Collection Id, ImageSize- Image size of the photos, ClickUrl-set value as null, currentPhoto- The photo from where you want to start the slideshow | - |
| startSlideshow | Starts the slide show | - |
| checkSlideshowLoaded | Checks if the slideshow images are loaded or not. If loaded on the page it will start the slideshow. | - |
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.
