Build an Image Slider in ADF/WebCenter Portal using jFlow Plus v2

In a modernized ADF/WebCenter Portal application, it's very common to have an image slider that can slide images automatically/manually from one to another. If you are thinking of implementing such functionality, my post here might help you. The image slider transition is implemented by JQuery. I will not focus anything on JQuery as there are many third party JQuery plugin out there for such image sliding effect. But those plugins are not ready to use for your ADF/WebCenter application, due to ADF technology itself which is based on faces components. Here I am presenting a working copy of such implementation.

The plugin I used here is "jFlow Plus v2". You can download the plugin and find more info about it here: http://wordimpress.com/demos/jflowplus-v2/. To preview the finished version built on top of ADF, here is the screenshot:

Here are several things I want to emphasize:

1. Determine your page layout - flow layout or stretch layout. You always want to determine this before starting working on any user interface related project.
2. Determine the images' (yes, plural) width. The slider contains a series of images which may not be consistent on sizes. You need to consider your expected user experience if you have such case.
3. Build the slider functionality into an ADF task flow. This sounds pretty natural as you want to wrap all the slider related resources into one task flow.
4. Consider where to fetch the image. In my example, I just put the images in the local project directory. However, the powerfulness of ADF/WebCenter Portal application would of course have a dedicated centralized repository to store the images (Content server or DB). When stored in content server, the images should be retrieved as an iterator (by CMIS or RIDC). The iterator could be coded with <af:forEach> tag to iterate each image.

To make the application functioning, you would need some knowledge on ADF skinning, JavaScript and UI development. All you have to do is taking over the plugin and tweak it working in your ADF application.

You can download the finished application here (Built on JDev 11.1.1.6)