Simpleviewer est certifié de mon label «jolie brique bleue» anti-iPad, anti-iPhone.


 

Tutoriel :


1. On commence par télécharger le pack simpleviewer sur le site d’AIRTIGHTINTERACTIVE (cliquez ici). Vous obtenez un dossier simpleviewer_numerodelaversion (dans mon cas simpleviewer_203) Dans ce dossier , vous avez un dossier web.


2. Vous ouvrez ce dossier web, dedans vous y trouverez :

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

  2. deux dossiers :

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

  4. 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.

  5. 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*)

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


<image imageURL="images/nom_d’image.jpg" thumbURL="thumbs/nom_de_la_vignette.jpg" linkURL="" linkTarget="" >
   
<caption>blablabla etc.</caption>
</image>


3. Dans la page gallery.xml remplacez :

  1. 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 ;-) )

  2. nom_de_la_vignette.jpg (par défaut tall.jpg ou wide.jpg) par les différents noms et extensions de vos vignettes. Pour simplifier les choses, et vu qu’elles sont rangées dans des dossiers différents, j’ai choisi le même nom pour l’image et sa vignette correspondante.

  3. blablabla etc.  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 blablabla etc. mais je laisse les balises <caption></caption> en place.
    On peut trouver à la place de
    blablabla etc. du code HTML de cette façon
    <caption><![CDATA[ici je mets mon code HTML]]><caption>
    Vous en trouverez un exemple dans votre fichier XML.
    <caption><![CDATA[Welcome to <u><a href="http://www.simpleviewer.net" target="_blank">SimpleViewer</a></u>.]]></caption>

pour obtenir dans mon exemple :


<image imageURL="images/1.jpg" thumbURL="thumbs/1.jpg" linkURL="" linkTarget="" >
   
<caption></caption>
</image>

<image imageURL="images/2.jpg" thumbURL="thumbs/3.jpg" linkURL="" linkTarget="" >
   
<caption>blablabla etc.</caption>
</image>

etc.


  1. 4.vous «uploadez» votre dossier web à la racine de votre serveur-FTP (dans le dossier www, web ou public_html le plus souvent) ou dans le dossier Sites (iDisk > Web > Sites) pour MobileMe  ( voir la méthode 3 du sujet «upload de fichiers» si besoin)

    Je vous conseille de renommer ce dossier
    web de simpleviewer (trop banal et qui peut prêter à confusion) en simpleviewer (au moins on sait ce que contient ce dossier)


  2. 5.Vous devez maintenant obtenir l’URL de la page index.html de simpleviewer. Pour la plupart des cas, l’adresse de cette dernière sera de ce type
    http://web.me.com/votrepseudo/simpleviewer/index.html (MobileMe)
    http://www.monsite.com/simplewiever/index.html (
    FTP avec nom de domaine)
    http://votrepseudo.free.fr /simpleviewer/index.html (
    Free)
    http://pagesperso-orange.fr/votrepseudo /simpleviewer/index.html (
    Orange)

  3. 6.On passe à iWeb maintenant :

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



  1. <iframe src="http://www.mon_site.com/simplewiever/index.html" width="800" height="500" allowTransparency="true" frameborder="0" scrolling="no" />


  1. Remplacez dans ce code :


  2. 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)

  3. la hauteur et la largeur à votre convenance (ici la galerie fait 800 de large (width) sur 500 de haut (height)).

  4. 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

  5. Publiez et admirez le résultat sur votre navigateur.


Des alternatives :

Simpleviewer est l'un des diaporamas  qui a le plus de succès parmi les utilisateurs d'iWeb , sans doute parce que

  1. on trouve facilement des tutoriels anglais ou français, sur Clubiweb notamment (méthode sans doute plus facile utilisant un plugin iPhoto), bien avant que je fasse celui-ci.

  2. c'est l'un thème (skin) utilisable avec Jalbum et qu'il est sans doute plus facile d'utiliser et de publier son diaporama Simpleviewer avec ce logiciel gratuit (don possible).

Mais il serait dommage de se limiter à Simpleiewer. En voici d'autres sur un mini-site de démo Slideshows




La plupart de ces diaporamas n'utilise pas flash , ce qui les rend compatible avec l'iPhone et iPad. Malheureusement faute de temps je n'ai pas de tutoriel à proposer pour chacun.

 

Commentaires   |   Accueil     Archives     Précédent     Suivant    Forum     Mon Twitter     Débuter sur Mac