Depuis quelques mois, je parle régulièrement sur ce blog de DeepZoom, technologie intégré à Silverlight 2. Celle-ci permet d’afficher une énorme quantité de documents, photos… au travers un simple navigateur. Certains d’entre vous m’ont demandé à plusieurs reprises comment réaliser simplement une collection DeepZoom à partir de photos et surtout comment et où l’héberger celle-ci. Voici le How-To Deepzoom pour créer vos collections photos et présenter vos futurs vacances à vos amis, famille de façon originale.
1. Télécharger DeepZoom Composer
Télécharger Deep Zoom Composer
2. Importer vos photos
Créez un nouveau projet puis cliquez sur “Add image”. Sélectionnez les images que vous souhaitez intégrer à la collection.
3. Créez votre composition
Rendez vous sur l’onglet “Compose” puis glissez-déposez les différentes images sur la partie centrale et organisez votre collection. Vous êtes libre de redimmensionner les images, de cacher des images miniatures dans d’autres images qui cachent elles-meme d’autres images. Nous l’avions réalisé ici.
4. Exportez du projet
Une fois votre organisation terminée, rendez vous sur l’onglet “Export” pour générer votre collection Deepzoom. Donnez lui un nom puis cliquez sur le bouton “Export”.
Cela peut prendre quelques minutes selon le nombre de photos et leur taille.
Une fois terminé, la fenetre ci-dessous apparaitra. Cliquez sur “Preview in Browser” pour voir le rendu de votre collection au travers votre navigateur.
5. Préparez votre projet pour l’héberger sur Silverlight Streaming
Afin de pouvoir hérberger votre collection DeepZoom sur Silverlight Streaming, vous allez devoir rajouter un fichier “Manifest” dans l’ensemble des fichiers générés dans le répertoire suivant:
C:\Users\<User>\Documents\Expression\Seadragon Projects\<My Project Name>\source images\OutputSdi\<My Export Name>\DeepZoomOutput_Web\ClientBin
Dans ce dossier, créer un nouveau fichier que vous nommerez “Manifest.xml” et copiez collez le XML ci-dessous:
<SilverlightApp>
<version>2.0</version>
<source>DeepZoomOutput.xap</source>
<width>1400</width>
<height>1400</height>
<background>white</background>
<isWindowless>false</isWindowless>
<framerate>24</framerate>
</SilverlightApp>
Voici à quoi dans ressembler votre dossier après l’ajout:
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
Maintenant sélectionnez le tout et zippez-le à la racine.
6. Upload de la collection sur Silverlight Streaming
Silverlight Streaming va vous permettre de déposer votre collection en ligne. Connectez-vous sur Sivlerlight Streaming puis allez sur “Manage Applications”. Donnez un nom à votre application (ex: DeepZoom Photo), cliquez sur “Create” puis uploadez le fichier .zip que vous venez de créer.
Une fois l’upload de votre fichier .zip terminé, vous pourrez visionner votre collection, l’embarquer sur votre site….
Voici la collection de la démo ici. N’hésitez pas à partager au travers des commentaires, vos meilleurs collections!
Original post by bgauth
