Manuel d'utilisation du plugin IM5

1. Fonctionnalités

Le plugin jQuery IM5 est une visionneuse d'images destinée à être incorporée au coeur d'une page web.
Ses fonctionnalités sont les suivantes :

a. Passage d'une photo à l'autre avec effet de transition.
Ce passage peut se faire via les boutons de navigation à gauche et à droite ou en cliquant directement sur l'image dans la barre de navigation horizontale de la visionneuse.
b. Zoom possible sur n'importe quel endroit de l'image.
Ce zoom active un rectangle qui accompagne la souris de l'internaute, en grossissant 4X dans celui-ci la partie de l'image désignée par la souris.
c. Infobox avec le contenu de l'attribut "title" de l'image, la position de la photo dans la liste (pos./total) et le nom du fichier.
Cet infobox peut être masqué par l'internaute ; dans ce cas, seul une icône apparaît en bas à gauche pour permettre à l'internaute de réafficher l'infobox.

2. Pré-requis

Sur chaque page où il est utilisé, le plugin requiert que soient présents au coeur de la balise "head" de la page

a. la bibliothèque jQuery (minimum 1.7) :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
b. le lien vers la feuille de style du plugin :
<link rel="stylesheet" type="text/css" href="http://ict.aml-cfwb.be/IM5/styleIM5.css" />
c. le lien vers le script IM5 proprement dit :
<script type="text/javascript" src="http://ict.aml-cfwb.be/IM5/IM5.js"></script>

Vous pouvez bien sûr choisir de télécharger ces trois élements (js et css) sur votre site et recourir à des liens locaux plutôt que distants.

3. Installation

Pour ajouter une visionneuse sur votre page, insérer une balise div avec la class "IM5Class" :
<div class="IM5Class"></div>
Il peut y avoir plusieurs visionneuses sur une seule page web.

4. Ajout d'images à la visionneuse

Deux méthodes sont possibles pour ajouter des images à la visionneuse. Vous pouvez combiner la méthode a et une des deux méthodes b (b1 ou b2).

a. Insertion d'images manuellement

Si vous connaissez les adresses http des images que vous voulez afficher, vous pouvez les insérer directement en html à l'intérieur de la balise div :


        <div class="IM5Class">

        <img src="http://www.votresite.be/images/image01.jpeg">

        <img src="http://www.votresite.be/images/image02.jpeg">

        <img src="http://www.votresite.be/images/image03.jpeg">

        </div>

b. Insertion automatique de toutes les photos liées à certaines fiches dans la base des AML, via l'attribut params de la balise div

Le nombre de fiches est théoriquement illimité ; toutefois, un trop grand nombre d'images pourrait ralentir le chargement de votre page.
L'attribut "title" de chaque image est dans ce cas lui aussi généré automatiquement :
titre de la fiche © Prénom Nom du photographe
La sélection des fiches peut se faire de deux manières, non combinables

b.1 A partir des cotes des fiches sélectionnées

Les cotes sélectionnées doivent être énumérées dans l'attribut params sous le paramètre 'cotes' :
<div class="IM5Class" params="cotes:XXXX 12345, YYYY 64789"></div>

b.2 A partir d'un mot-clé

Le sujet sélectionné doit être mentionné via son identifiant unique (ID) suivi éventuellement de son type (s=sujet, p=personne):
<div class="IM5Class" params="subjectID=12345;subjectType:p"></div>
Si le type n'est pas précisé, le plugin prend la valeur s (sujet) par défaut. Consultez la base de données pour connaître ID et type du mot-clé sélectionné.

5. Autres paramétrages

Ces paramètres sont combinables entre eux et avec ceux mentionnés au point 4.b.

a. L'infobox peut être configuré de trois manières différentes.
- Visible au démarrage, peut être réduit par l'internaute :
<div class="IM5Class" params="infosdisplay:full"></div>
- Réduit au démarrage, peut être affiché en complet par l'internaute via l'icône en bas à gauche :
<div class="IM5Class" params="infosdisplay:icon"></div>
- Invisible, ne peut être affiché par l'internaute :
<div class="IM5Class" params="infosdisplay:none"></div>
La valeur par défaut est full.
b. La fonction "zoom" peut être activée ou non
- Activée, l'icône "loupe" est visible en bas à droite : <div class="IM5Class" params="zoomenabled:true"></div>
- Désactivée, l'icône "loupe" est invisible : <div class="IM5Class" params="zoomenabled:false"></div>
La valeur par défaut est true.