Deep Zoom Composer

Le LiveLab de Microsoft propose de présenter les images autrement sur les sites web avec un lecteur doté d'une fonction d'agrandissement, en utilisant la fonctionnalité Deep Zoom de Silverlight.

Démonstration

Utilisez la roulette de la souris pour agrandir ou réduire, et déplacez le curseur pour décaler l'image.

Construire un zoom

Pour réaliser une image agrandissable, il faut télécharger l'éditeur gratuit, Deep Zoom Composer et accomplir 4 étapes:

  1. Créer un projet.
  2. Import:
    Ajouter une image de votre choix.
  3. Compose:
    Placer l'image dans l'espace dédié par glisser-déposer du panel de droite vers l'espace de composition. Agrandissez l'image. Cet espace sera repris tel quel dans votre page Web.
  4. Export:
    Générer les fichiers nécessaires.

Au moment de l'export, on vous propose de passer par le site de Microsoft ce qui nécessite d'ouvrir un compte PhotoZoom, ou de faire un export Silverlight. Le second choix semble préférable car il ne fait pas dépendre d'un site externe. Diverses options sont ensuite proposées qui sont exposées dans le fichier manuel PDF à télécharger.

Comment mettre en ligne votre réalisation

On fois le projet exporté, il faut récupérer les fichiers utiles pour les placer sur votre site Web. Aller dans le répertoire: 

nom de votre projet/source images/OutputSdi/nom de votre projet/DeepZoomProjectWeb/ClientBin

Il faut mettre en ligne les fichiers DeepZoomProject.xap et le sous-répertoire GeneratedImages.

Tandis que le lecteur et le script JavaScript contenus dans DeepZoomProjectTestPage.html sera recopié dans votre page.

Le lecteur a intégrer ressemble à ceci: 

<div id='errorLocation' style="font-size: small;color: Gray;">
</div>
<div id="silverlightControlHost">
  <object data="data:application/x-silverlight," 
     type="application/x-silverlight-2" width="100%" height="100%">
  <param name="source" value="DeepZoomProject.xap"/>
  <param name="onerror" value="onSilverlightError" />
  <param name="background" value="white" />
  <a href="http://go.microsoft.com/fwlink/?LinkID=115261">
  <img src="http://go.microsoft.com/fwlink/?LinkId=108181"/>
</a>
</object>
<iframe style='visibility:hidden;height:0;width:0;border:0px'></iframe>
</div>

Copier le code à l'endroit de la page où vous voulez faire apparaître l'image.