Vous êtes ici : Accueil (Haute-Savoie) > Imagebox
Article
Publié le 18 janvier 2009, modifié le 29 octobre 2012

Imagebox

ImageBox est un ensemble de scripts javascript destinés à afficher des images dans un calque (plan) placé en avant de la page web et donc avec pour seule contrainte la taille de l'écran. L'indication de prédilection est l'affiche d'une image (ou d'un ensemble d'images) en cliquant sur une miniature intégrée à la page.

Ces scripts ont nécessité un léger lifting pour être compatibles avec jQuery 1.4, donc avec spip 2.1:
(remplacement de jQuery('a[@rel= par jQuery('a[rel=. Vous trouverez les scripts mis à jour en suivant les liens ci-dessous:

Utilise la librairie javascript
jquery.js chargée par SPIP grâce à la balise #INSERT_HEAD.
Utilise les librairies javascript
iutil.js et
imagebox.js chargées dans l'entête de la page.
Ainsi que la feuille de style
imagebox.css

Avec SPIP:
#INSERT_HEAD
<script type="text/javascript" src="iutil.js"></script>
<script type="text/javascript" src="imagebox.js"></script>
<link rel="stylesheet" href="imagebox.css" type="text/css" media="screen" />
Sans SPIP:
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="iutil.js"></script>
<script type="text/javascript" src="imagebox.js"></script>
<link rel="stylesheet" href="imagebox.css" type="text/css" media="screen" />

Dans le corps de la page (ou le texte de l'article - et c'est la seule chose dont vous avez à vous préoccuper sur ce site -) les images sont intégrées par le code suivant:
<a href="monimage.jpg" rel="imagebox" title="mon titre">lien</a>
Le contenu de l'attribut title est réaffiché dans le cadre ImageBox. Il est possible, bien sûr de remplacer le texte du lien par une miniature de l'image. Pour afficher une série d'images, ajouter un identifiant commun:
<a href="monimage1.jpg" rel="imagebox-identifiant" title="mon titre">lien</a>
<a href="monimage2.jpg" rel="imagebox-identifiant" title="mon titre"></a>
Le tiret n'est pas obligatoire devant l'identifiant. Il est possible d'afficher plusieurs séries d'images dans la même page en utilisant des identifiants différents.

Initialiser ensuite ImageBox par le code suivant placé plus loin dans le corps de la page (ou dans le squelette SPIP):
<script type="text/javascript">
//<![CDATA[
$(document).ready( function() {	$.ImageBox.init({}); } );
//]]>
</script>



Source d'ImageBox interface.eyecon.ro/docs/imagebox/
Corrections de bugs www.intelliance.fr/jquery/imagebox/
Des alternatives:
Slimbox www.digitalia.be/software/slimbox2



Cet article a reçu 754 visites.

Imprimé à partir du site Sgen-CFDT de l’académie de Grenoble, http://cfdt.alpviv.org le 14/11/2019