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 libraryTo 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 databaseTo 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>");
With "Photo" the name of view who displayed photos.
Now, you just have to add in your web page :
<div id="mySlideshow"></div>
to define where you want to display the slideshow.
You can display an example with
my photos from Britain.
Version française
download the database
