Developpez.com

Une très vaste base de connaissances en informatique avec
plus de 100 FAQ et 10 000 réponses à vos questions

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 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.

 
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

Et 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 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 :

 
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 et 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.