Photo Viewer AJAX Portlet

The Photo Viewer AJAX Portlet (Flickr, Picasa, Photobucket) - JSR 168 compliant - is now available in the Portlet Repository. You can download the portlet from the Portlet Repository Downloads page.

Description of the portlet

The PhotoViewerAjaxPortlet is a simple application that wraps the JavaScript classes to stream and animate the presentation of images. Photoshow portlet is designed keeping in mind two different categories of sources for the images. In the first category images can simply be arranged in a folder. In the second category the Photoshow Portlet takes photo feeds from all popular sites, such as PhotoBucket, Flickr, and Picasa Web Albums. However, the Photoshow portlet allows any photo-based feed to be accommodated such as any custom feed that you may have. In fact, any feeds that use Media RSS can be used without customization.

Readme

Photoshow Portlet RC1.0

Photoshow Portlet is a simple application that wraps the JavaScript classes to stream and animate the presentation of images. Photoshow portlet is designed keeping in mind two different categories of sources for the images. In the first category images can simply be arranged in a folder. In the second category the Photoshow Portlet takes photo feeds from all popular sites, such as PhotoBucket, Flickr, and Picasa Web Albums. However, the Photoshow portlet allows any photo-based feed to be accommodated such as any custom feed that you may have. In fact, any feeds that use Media RSS can be used without customization.

The first category photoshow is based on Mootools (a JavaScript library) and the second category photoshow is based on Google's Ajax Feed API (another JavaScript library). For more information on JavaScript class for Mootools see http://www.electricprism.com/aeron/slideshow/ and for Google AJAX Feed API Slideshow check out http://www.google.com/uds/solutions/slideshow/index.html

This portlet has been written from ground up incorporating most of the features available in both Mootools and Google's Ajax Feed Slideshows. The Photoshow Portlet is highly customizable with various options to choose from such as the number of photos to display, display and transition time between photos, how the photos link back to their source, etc.

This portlet has been tested to work on Pluto container, uPortal 2.5.3, Tomcat (5.5.x), IE, FF and Safari.

Installation:

1. Simply deploy the war file in your Portal server's (JSR168/286 compliant portlet container) webapps directory.

2. A build.xml is also provided for ant based deployments.

Note: You don't need deployPortlet target of uPortal build.xml to deploy this portlet. Simply deploy using ant deploy that should suffice. If you still have to use uPortal ant deploy make sure that your web.xml shows version as 2.4 as in <web-app version="2.4">

You will need the following JavaScript files within the head of your HTML document (I put it in \webapps\uPortal\WEB-INF\classes\org\jasig\portal\layout\AL_TabColumn\integratedModes\integratedModes.xsl if you are using for example ALM. Choose corresponding directory for the DLM mode.)

Be sure to link the .js files (provided in the source bundle) in the order they appear below and remember to adjust the src to reflect the location of the JavaScript in your web application.

<script src="js/mootools.js"></script>

<script src="js/tools.js"></script>

<script src="js/slideshow.js"></script>

<script src="http://www.google.com/jsapi?key=xxx"></script>

<script src="js/gfslideshow.js" ></script>

If you don't already have a Google AJAX Feed API key, your first step is to sign up for a key at http://code.google.com/apis/ajaxfeeds/signup.html.

<script src="js/yahoo-min.js"></script>

<script src="js/event-min.js"></script>

<script src="js/validate.js" ></script>

Usage:

How do we use it? It's not in production yet but we do plan to publish two instances of this portlet. The first instance is going to be closed (preconfigured- no editing allowed) and pushed on the Guest Page (Top left). The second instance is going to be published as open, pull able and editable channel.

Please, let me know if you've any questions.