Web 2.0 & Domino: AJAX - Photo library (1st Part) : How to display a slideshow without Flash

After summer holiday, it's time to show photos to all the family. This article and the next present how to use AJAX libraries to add effects on photo without using Flash. This first part show how to integer a slideshow, the next how to zoom on photo with the actual very famous library lightbox.

Jonathan Shemoul's Smooth SlideShow
The Jonathan Shemoul's Smooth Slideshow javascript library allow to display animated splash screen or header to your web Site. This library uses protoype.js and moo.fx. The total file size of this library (without pictures) is around 21,6 kB. To compare with Flash solution, dewsliders (famous french flash picture slideshow) use 30,4 kB. I don't want to compare this two solutions because I don't know Flash. The choice of this javascript library is motivated by the target of this blog, how to implement AJAX solution with Lotus Domino.

Installation of the library
To use the library you must first download the files. Extract the files from the zip file. Add the files in shared resources of your database :

moo.fx.js
moo.fx.pack.js
protoype.lite.js
showcase.slideshow.js
timed.slideshow.js
jd.slideshow.css

How to use the library
To use the library you must :

to declare javascript library ans css style sheet in the header of your web page
to declare the pictures files to display in the slideshow
to custommize the size of the slideshow
to define where to display the slideshow in your web page

The pictures to display is define thru a javascript array like this :

mySlideData[countArticle++] = new Array(
'picture1.jpg',
'linkedwebpage1.html',
'Item 1 Title',
'Item 1 Description'
);

How to use it in Lotus Notes database
To manage easily the photo to display in my slideshow, I use a form to record each pictures. This form have the fields :

Title : text field
Link : text field
Description : text field
Photo : rich-text field

I define a view to display this documents. This view will be called by the javascript to define the array. Then I specify the formula of my second column like this :

"mySlideData[countArticle++] = new Array('"
+ "0/" + @Text(@DocumentUniqueID) + "/$file/"
+ @subset(@attachmentnames; 1) + "', '"
+ Lien + "', '"
+ Titre + "', '"
+ Description + "');"

The first column of my view is defined with the sort key I want to use. In my example the title of the document. Don't forgotto specify this column as sorted to use @dbcolumn.

To created my Web page who displayed the SlideShow I use a Lotus Notes Page. You can use a form too if you want.

In the HTML header content we must specify the path to javascript files and css stylesheet file, add an OnLoad event to load the library and add the picture array :

Photos:= @DbColumn("":"";"";"Photos" 1);
@If(@IsError(val); "" ;
"<script src="\" type="\"></script>
<script src="\" type="\"></script>
<script src="\" type="\"></script>
<script src="\" type="\"></script>
<link rel=\"stylesheet\" href=\"jd.slideshow.css\"
type=\"text/css\" media=\"screen\" />

<script type="\">
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func; }
else {
window.onload = function() {
oldonload();
func();
}
}
}
function startSlideshow() {
initSlideShow($('mySlideshow'), mySlideData);
}

countArticle = 0;
var mySlideData = new Array();"
+ @Implode(Photos) +
"addLoadEvent(startSlideshow); </script>
<style>
#mySlideshow {
width: 400px !important;
height: 200px !important;
}
</style>");