IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Les fonctions de manipulation du tampon de sortie (buffer)


précédentsommairesuivant

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.

 
Sélectionnez
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

 
Sélectionnez
//
// 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.

 
Sélectionnez
/**
 * 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 :

 
Sélectionnez
/**
 * 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 :

 
Sélectionnez
//
// ajouter une miniature
$oHighslide->addThumbnail('monimage.jpg');

Vous avez désormais une image zoomable sur votre site. N'hésitez pas à cliquer dessus…


précédentsommairesuivant

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2009 Jean-François Lépine. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.