IV. Cas pratique : une miniature HighSlide▲
IV-A. Introduction▲
HighSlide est un mini framework JavaScript pour générer des images zoomables, des galeries photos, des textwrappers...
HighSlide est payant mais gratuit pour un usage personnel.
Nous allons créer une classe JS_Generate_Highslide pour générer des miniatures, classe fille de notre classe JS_Generate.
IV-B. La Classe JS_Generate_Highslide▲
Créons le fichier JS_Generate_Highslide.php qui va contenir notre classe :
Téléchargez la dernière version de HighSlide. Décompressez l'archive et placez-la dans le dossier js/highslide.
class JS_Generate_Highslide extends
JS_Generate {
/*
*
METHODES
*
____________________________________________
*/
/**
*
constructeur
:
on
va
ajouter
un
script
qui
va
instancier
nos
scripts
*
@param
string
répertoire
de
highslide
*
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
*/
public
function
__construct
($hsDir
=
null
) {
//
//
définir
le
répertoire
de
Highslide
if
(!
is_null($hsDir
) &
&
!
empty($hsDir
) &
&
is_string($hsDir
)) {
//
//
"/"
final
if
(!
substr($hsDir
,
strlen($hsDir
) -
1
,
1
) !
=
'
/
'
) {
$hsDir
.
=
'
/
'
;
}
$this
-
>
setDir($hsDir
);
}
//
//
initialiser
highslide
$this
-
>
init
();
}
}
Arrêtons-nous sur ce code assez simple :
Le constructeur de la classe (qui hérite, rappelons le, de JS_Generate) peut attendre un paramètre : le dossier qui contient HighSlide.
La méthode init sera détaillée plus bas.
Pour l'instancier, nous allons modifier notre fichier index.php
//
//
démarrer
la
temporisation
du
flux
de
sortie
ob_start();
//
//
fichier
requis
require_once '
class
/
JS_Generate
.
php
'
;
require_once '
class
/
JS_Generate_Highslide
.
php
'
;
//
//
notre
page
simplifiée
(sans
doctype,
etc)
echo '
<
html
>
<
head
>
<
/
head
>
<
body
>
'
;
//
//
instance
d'un
objet
highslide
$oHighslide
=
new JS_Generate_Highslide('
js
/
highslide
'
);
IV-C. Installer HighSlide sur une page HTML▲
Nous allons maintenant créer une méthode qui va installer highslide sur nos pages web, comme expliqué dans la documentation officielle.
Pour cela, créons la méthode init qui va écrire les scripts d'appel.
/**
*
initialiser
highslide
:
appeler
les
fichiers
,
etc
.
*
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
*/
public function init
() {
//
//
si
on
n'a
pas
encore
utilisé
highslide
sur
la
page
$alreadyUser
=
$this
-
>
isAlreadyUsed();
if(!
$alreadyUser
) {
//
//
ajouter
les
fichiers
nécessaires
au
fonctionnement
des
scripts
$hsDir
=
$this
-
>
getDir();
$this
-
>
addFile($hsDir
.
'
highslide
-
full
.
js
'
);
$this
-
>
addFile($hsDir
.
'
highslide
.
css
'
);
$this
-
>
addFile($hsDir
.
'
highslide
-
ie6
.
css
'
);
//
//
initialiser
highslide
$strInit
=
"
hs
.
graphicsDir
=
'
"
.
$hsDir
.
"
graphics
/
'
;
"
.
"
hs
.
outlineType
=
'
rounded
-
white
'
;
"
;
$this
-
>
addScript($strInit
);
//
//
signaler
que
les
scripts
de
démarrage
sont
écrits
$this
-
>
isAlreadyUsed(true);
}
}
IV-D. Une miniature en une ligne de code▲
Et oui, c'est désormais presque possible. Il ne nous reste plus qu'à créer une méthode addThumbnail à notre classe, telle que :
/**
*
ajouter
un
miniature
*
@param
array
données
de
la
miniature
/
juste
le
chemin
*
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
*/
public function addThumbnail($tImage
) {
//
//
si
$tImage
n'est
pas
un
tableau,
alors
utiliser
$tImage
comme
l'url
à
utiliser
if(is_string($tImage
)) $tImage
=
array('
src
'
=
>
$tImage
);
//
//
id
par
défaut
if(!
isset($tImage
[
'
id
'
]
)) {
$id
=
$this
-
>
getId();
$id
+
+
;
$this
-
>
setId($id
);
$id
=
'
hs_thumb
'
.
$id
;
}
//
//
paramètres
de
la
miniature
$src
=
$tImage
[
'
src
'
]
;
$height
=
isset($tImage
[
'
height
'
]
) ?
$tImage
[
'
height
'
]
:
'
80
'
;
$width
=
isset($tImage
[
'
width
'
]
) ?
$tImage
[
'
width
'
]
:
'
80
'
;
$alt
=
isset($tImage
[
'
alt
'
]
) ?
$tImage
[
'
alt
'
]
:
'
miniature
'
;
$hsStyle
=
'
rounded
-
white
'
;
//
//
construire
la
miniature
$strThumb
=
"
\n
"
.
'
<
a
id
=
"
'
.
$id
.
'
"
href
=
"
'
.
$src
.
'
"
class
=
"
highslide
"
onclick
=
"
return
hs
.
expand
(
this
,
'
.
"
{
outlineType
:
'
"
.
$hsStyle
.
'
\'
}
)
"
>
'
.
"
\n
"
.
'
<
img
src
=
"
'
.
$src
.
'
"
alt
=
"
'
.
$alt
.
'
"
'
.
'
title
=
"
Agrandir
"
height
=
"
'
.
$height
.
'
"
width
=
"
'
.
$width
.
'
"
/
>
<
/
a
>
'
.
'
'
;
//
//
ajouter
au
code
$this
-
>
addContent($strThumb
);
//
//
retour
return true;
}
Et maintenant, tout simplement dans le fichier index.php :
//
//
ajouter
une
miniature
$oHighslide
-
>
addThumbnail('
monimage
.
jpg
'
);
Vous avez désormais une image zoomable sur votre site. N'hésitez pas à cliquer dessus...