De retour d'un long week-end du 15 Août, il est temps d'exposer les photos souvenir. Le but n'est pas de présenter une application de gestion de photos mais plutôt de présenter deux solutions AJAX que je trouve esthétique et très facilement intégrable avec Lotus Domino. La première solution présentée dans cet article présente les photos sous forme de bandeau avec effet de transition fondu enchainé et la possibilité d'ajouter un titre, une description ainsi qu'un lien. La seconde solution sera présentée dans le prochain article. Elle permet d'ouvrir les photos depuis des imagettes sous forme de boite de dialogue modale. Cet effet est notamment utilisé sur zoomr.
Smooth Slideshow de Jonathan SchemoulLa bibliothèque JonDesign's Smooth SlideShow permet de créer rapidement un bandeau avec effet fondu enchainé comme on en trouve déjà beaucoup en Flash. Cette bibliothèque s'appuie sur prototype.js et moo.fx. Le tout pèse 21,6 ko ce qui me semble très raisonnable surtout si l'on utilise ces bibliothèques pour d'autres usages sur le site. Pour comparaison, dewslider.swf, un excellent équivalent en flash, pèse 30,4 ko. Cependant, n'y connaissant rien en Flash, je ne me permettrais pas d'avancer d'arguments pour ou contre l'une de ces solutions. Le choix de cette bibliothèque est avant tout motivé par le but principal de ce blog, présenter des solutions AJAX pour Lotus Domino.
Installation de la bibliothèque Pour utiliser la bilbiothèque il faut tout d'abord télécharger le package disponible sur la page de présentation de la bibliothèque. Une fois le fichier décompressé, ajouter les fichiers javascript et la feuille de style dans les ressources partagées de la base Lotus Notes. Les fichiers à ajouter sont :
- moo.fx.js
- moo.fx.pack.js
- protoype.lite.js
- showcase.slideshow.js
- timed.slideshow.js
- jd.slideshow.css
Si l'on utilise déjà prototype.js, inutile d'ajouter prototype.lite.js.
Utilisation de la biliothèque Comme décrit dans la documentation, il faut
- déclarer les bibliothèques javascript et la feuille de style
- déclarer les images à présenter
- personnaliser la taille de la zone d'affichage
- définir la zone d'affichage dans la page
La déclaration des images à présenter se fait à travers un tableau déclaré en javascript sous la forme :
mySlideData[countArticle++] = new Array(
'image1.jpg',
'article1.html',
'Item 1 Title',
'Item 1 Description'
);
Intégration dans Lotus NotesPour faciliter la mise à jour des photos, je passerais par un masque pour gérer les photos à afficher. Ce masque est défini avec les champs suivants :
- Titre : champ texte libre
- Lien : champ texte libre
- Description : champ texte libre
- Photo : champ texte riche
Une fois le masque créé, reste à définir une vue "Photos". Pour me faciliter la tache, la vue présentera directement le code Javascript à intégrer dans ma page. La formule de colonne sera :
"mySlideData[countArticle++] = new Array('"
+ "0/" + @Text(@DocumentUniqueID) + "/$file/"
+ @subset(@attachmentnames; 1) + "', '"
+ Lien + "', '"
+ Titre + "', '"
+ Description + "');"
Ne pas oublier de trier la première colonne dans la vue pour pouvoir extraire les données avec @dbColumn.
Pour créer ma page Web, je vais passer par une page Notes mais on peut aussi l'intégrer dans un masque.
Comme contenu de titre HTML il faut intégrer les librairies javascript, ajouter un évenement Onload pour lancer le bandeau à l'ouverture de la page puis définir les images à afficher à partir de la vue précédemment créée et enfin définir les options de style pour définir la taille du bandeau, soit :
Photos:= @DbColumn("":"";"";"Photos" 1);
@If(@IsError(val); "" ;
"<script src=\"prototype.lite.js\" type=\"text/javascript\"></script>
<script src=\"moo.fx.js\" type=\"text/javascript\"></script>
<script src=\"moo.fx.pack.js\" type=\"text/javascript\"></script>
<script src=\"timed.slideshow.js\" type=\"text/javascript\"></script>
<link rel=\"stylesheet\" href=\"jd.slideshow.css\"
type=\"text/css\" media=\"screen\" />
<script type=\"text/javascript\">
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>");
Il ne reste plus qu'à indiquer dans la page où afficher le bandeau en ajoutant en tant que texte HTML relais :
<div id="mySlideshow"></div>
C'est fini, voici un exemple de résultat avec quelques
photos du Golfe du Morbihan.
English version
Le mois d'août étant le mois le moins chargé de l'année, je profite toujours de cette période pour revoir ma documentation et les présentations que je suis amené à diffuser. J'ai donc profiter de l'occasion pour voir comment améliorer le rendu des graphiques générés par Excel. Même si le plus important reste le contenu, l'auditeur est toujours plus attentif si le visuel est agréable.
Sélection du nouveau calque créer puis sélectionner dans le menu "Edition\Transformation\Symétrie axe vertical". Déplacer alors le graph retourné sous l'autre graphique.
