Tutoriel :

i

On commence par télécharger le pack simpleviewer sur le site d’AIRTIGHTINTERACTIVE (cliquez ici)

ii

Vous ouvrez ce dossier simpleviewer, dedans vous y trouverez :

1. ‣un fichier viewer.swf (on n’y touche pas)
   
   

2. ‣un fichier swfobject.js (on n’y touche pas)
   
   

3. ‣Une page readme.html (sans importance)
   
   

4. ‣deux dossiers
   

5. ‣un dossier images : ajoutez vos images personnelles max. 480x480 px. en JPEG de préférence.
   

6. ‣un dossier thumbs : ajoutez vos vignettes 65x65px (= les petites images sur lesquelles on clique à gauche du diaporama, chacune des vignettes doit avoir le même nom que les images grand format correspondantes.
   
   

7. ‣une page index.html : celle ci on l’ouvrira avec un éditeur de texte comme Smultron (gratuit), pour modifier la couleur de fond de la galerie (ligne 39 : #181818 determine le gris de la galerie par défaut, remplacez-le par le code de couleur qui vous plaira*)
   
   

8. ‣une page gallery.xml : ouvrez la avec Smultron à partir de la ligne 7 jusqu’à l’avant dernière ligne le code est une succession de :
   

9. 
   

10. <image>
    

11. <filename>nom_d’image.jpg</filename>
    

12. <caption>Caption numero</caption>
    

13. </image>
    

14. 
    

15. Remplacez
    
    

16. ‣nom_d’image.jpg (par défaut tall.jpg ou wide.jpg) par les différents noms et extensions de vos photos chez moi 1.jpg 2.jpg etc. (je sais, c’est original comme nom ;-) )
    

17. ‣Caption numero  par une petite légende de votre photo qui apparaîtra sous les vignettes, perso, je n’en mets pas pour l’instant j’efface Caption numero mais je laisse les balises <caption></caption> en place
    
    

18. pour obtenir dans mon exemple :
    

19. 
    

20. <image>
    

21. <filename>1.jpg</filename>
    

22. <caption></caption>
    

23. </image>
    

24. <image>
    

25. <filename>2.jpg</filename>
    

26. <caption></caption>
    

27. </image>
    

28. etc.
    

29. 
    

iii

vous uploadez votre dossier simplewiever à la racine de votre site iWeb et récupérez l’adresse de la page index.html de cette galerie qui doit être du genre

1. ‣http://web.me.com/votre_pseudo/simpleviewer/index.html sur mobileme ou
   

2. ‣http://www.mon_site.com/simplewiever/index.html si vous avez un nom de domaine
   

IV

On passe à iWeb maintenant :

Sur la page iWeb où vous souhaitez afficher votre galerie simpleviewer, dans un widget fragment HTML entrez le code suivant :

<iframe src=«http://www.mon_site.com/simplewiever/index.html» width=«800» height=«500» frameborder=«0» />

Remplacez http://www.mon_site.com/simplewiever/index.html par la vraie adresse de la page index.html de la galerie (ne pas confondre avec la page index.html de votre site iWeb)

ici la galerie fait 800 de large sur 500 de haut , remplacez la hauteur et la largeur à votre convenance

Placez votre widget où vous le souhaitez sur votre page et évitez de le redimensionner  manuellement en tirant sur ces bords, c’est par le code que vous devez le faire

Publiez et admirez le résultat sur votre navigateur.

démo :

Ci dessous, vous trouverez une petite démo de la galerie simpleviewer au sein d’un site iWeb:

Il s’agit de captures de quelques-uns de mes fonds d’écran trouvés pour la plupart sur DeviantArt (via Macgeneration) ou Mandolux