IV. Cas pratique : une miniature HighSlide▲
IV-A. Introduction▲
HighSlide est un mini framework JavaScript pour générer des images zoomables, des galeries photo, 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▲
Eh oui, c'est désormais presque possible. Il ne nous reste plus qu'à créer une méthode addThumbnail à notre classe, telle que :
/**
* ajouter une 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…