Mettre Cooliris sur votre page d'accueil

Révision infoking1 du 15/05/2010

1) Monter sa galerie

Créez un dossier que vous nommerez "cooloris", et placez-y les images que vous souhaitez voir apparaître sur votre diaporama.

Téléchargez ensuite "PicLens Publisher" (cliquez sur l'image sous-dite).

Installez-le et suivez ensuite ces indications :

- Ouvrez le logiciel et cliquez sur "select folder" (1), puis indiquez le dossier "cooloris" (2) où
vous avez placé vos images, cliquez "Ok" (3).
- Puis cliquez sur "Next >>" (4).

Cette fenêtre s'ouvre... cliquez une fois de plus sur "Next >>" .

PicLens Publisher prépare alors vos futures miniatures pour le diaporama.

Enfin, choisissez le dossier de destination de votre diaporama, "select" (1), "créez un nouveau dossier" (2) que vous renommerez en "diaporama" (3), cliquez "Ok" (4).
Vous pouvez cliquer sur "Next >>" (5).

Puis dans la fenêtre suivante, cliquez sur "Finish". Votre diaporama est prêt.

Dans votre dossier "diaporama" , vous trouverez deux sous-dossiers : L'un contenant
vos images et l'autre contenant les miniatures du diaporama, le fichier gallery.html lance un simple diaporama
basic dans votre navigateur.

Le fichier "photos.rss" va servir pour intégrer le mur d’images sur votre site (en l'occurrence, sur votre page d'accueil... ).

Note
Si vous l’éditez avec Notepad++, vous pourrez ajouter des commentaires à vos images en remplaçant le texte entre les balises <title> XXXX</title> par le texte/titre de votre choix.

2) Préparer son site

Transférez votre dossier "diaporama" sur votre site grâce à votre logiciel FTP, à la racine de PHPBoost.

Autoriser l'accès au site

Vous devez créer et enregistrer un fichier, le "crossdomain.xml"contenant le code indiqué. Un simple copier/coller dans Notepad++ suffira... Enregistrez le en ".xml"

Code XML :

<?xml version="1.0"?>
<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="*.cooliris.com" />
</cross-domain-policy>

A l'aide de votre logiciel FTP, placez le fichier dans le dossier WWW à la racine de pbt, nommé "crossdomain.xml"

3) Préparer son mur d’images

Pour cela , vous allez vous rendre sur le site de Cooliris : Cooloris express. puis cliquez sur "Create your…".

Cette page s'ouvre..

-Cliquez sur "MediaRSS" (1).
-Entrez l'URL complète "http://www.mon-site.com/diaporama/photos.rss" et cliquez "Ok" (2). patientez quelques secondes... votre diaporama apparait

- Vous pouvez personnaliser votre diaporama en cliquant sur "Customize" (3).

Faites vos tests de personnalisation, la transformation est immédiate. Vous ne cliquerez sur "Publish" que LORSQUE vous aurez fini, et que vous serez satisfait du résultat de votre diaporama.

Vous êtes satisfait de votre personnalisation ?

==> Cliquez maintenant sur "Publish".

4) Récupération du code et installation

Normalement, une fenêtre de login s'ouvre ... Fermez là !

Vous voyez du coup plus clairement ceci :

Ouvrez votre bloc note, cliquez sur "Copy" et enregistrez en ".txt", par mesure de précaution

...

Deux choix s'ouvrent alors à vous :

1- Le code et l'apparence, ainsi que la dimension du diaporama vous convient, vous pouvez le placer directement sur votre index.php sous cette forme:

Code TPL :

<!--START module Cooloris-->
         <div class="news_container">
<div class="msg_top_l"></div>
<div class="msg_top_r"></div>
<div class="msg_top">
<div style="float: left;"><h3 class="title valign_middle">Mon mur Cooloris</h3></div>
<div style="float: right;"></div>
</div>
<div class="news_content">
<!--Placez votre code ici -->
            </div>
            <div class="news_bottom_l"></div>
            <div class="news_bottom_r"></div>
            <div class="news_bottom"></div>
        </div>
<!--END module Cooloris-->

Vous enregistrez et c'est bon ^^

2- Le code et l'apparence vous convient, MAIS pas les dimensions

... Vous pouvez les modifier dans le code, en changeant les valeurs suivantes:

Code TPL :

width="400" height="248"

Elles sont en 2 fois dans le code...

Exemple de code:

Voilà, maintenant vos paramètres hauteur et largeur sont à votre gout, vous pouvez reprendre le code TPL ci dessus pour inclure votre code et l'insérer dans votre index.php.

Le mur ne fonctionne qu’avec les navigateurs récents: Firefox 3 ou +, IE 7 ou +, Safari 4 et Google Chrome …
Si vous ajoutez à votre navigateur le plugin Cooliris vous pourrez visionner le mur d’images en 3D, ainsi que toutes les galeries de votre ordinateur.

Comme ceci:

Et celui de CsN :

Si vous avez des questions, n'hésitez pas à les poser sur le forum