EDUCATION NATIONALE
ACADEMIE DE GRENOBLE
ACADEMIE DE GRENOBLE
Syndicats généraux de l'Education nationale et de la Recherche publique de l'académie de Grenoble
Vous êtes ici : Accueil (test)
> 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 903 visites.
Articles voisins
- Documentation : squelettes (4 octobre 2014)
- Envoyer un message au webmestre (4 octobre 2014)
-
Mot de passe PRE (site fédéral) (4 octobre 2014)
(Adhérents) - Les accès réservés sur ce site et sur le PRE (site fédéral) (4 octobre 2014)
- Comment afficher... (13 septembre 2013)
-
Historique du site (24 juin 2013) (Rédacteurs)
- Documentation : tables SPIP (25 mars 2013)
-
Pourquoi une nouvelle structure ? (16 janvier 2013) (Admins)
-
Formulaire test (15 novembre 2012) (Rédacteurs)
