Faites un Zoom sur les textes de vos articles

Objet de la fonction :

Proposer à vos utilisateurs un zoom sur les textes, à chaques appels d’un article.

En appliquant cette fonction sur la balise #TEXTE de SPIP, un niveau de zoom est défini.

Vos utilisateurs peuvent alors cliquer sur un lien pour voir le texte de l’article s’agrandir.

Comment utiliser la fonction :

Nous allons ici proposer aux utilisateurs la possibilité de zoomer sur trois niveaux avec une image cliquable pour le lien.

Nous considérons un niveau, la taille de la police proposé aux utilisateurs.

Taille des polices par defaut :
-  Niveau 1 = taille du texte petit 100%
-  Niveau 2 = taille du texte moyen 120%
-  Niveau 3 = taille du texte grand 160%

Comment mettre en place la fonction zoom :

Copier coller le code de la fonction ci-dessous dans votre fichier mes_fonctions.php3.

Mise en place des images pour les liens

Placer les images zoom1.gif, zoom2.gif et zoom3.gif dans le répertoire IMG/
Vous trouverez les images dans le fichier attaché à cette article.

Appliquer la fonction dans vos squelettes

Insérer la fonction comme ceci dans vos pages d’articles.

[(#TEXTE|zoom_text{3,image})]

Détails de la fonction.
zoom_text{niveau,type_du_lien}

« 3 » indique le nombre de zoom proposé
« image » indique que le lien est une image. Alternativement, « texte » affiche le texte zoom, suivi du niveau de zoom.

<?
/*
*   +----------------------------------+
*    Nom du Filtre :  zoom_text                      
*   +----------------------------------+
*    Date : dimanche 5 décembre 2004
*    Auteur :  James <klike@free.fr>, Pepito <cypress@worldonline.fr>
*   +-------------------------------------+
*    Fonctions de ce filtre :
*     Proposer un lien pour effectuer un zoom sur vos textes
*   +-------------------------------------+ 
*  
*   exemple d'utilisation dans un squelette :
*   ici, nous proposons 3 niveau de zoom avec des liens texte
*   [(#TEXTE|zoom_text{3,texte})]
*   ici, nous proposons 1 niveau de zoom avec des liens image
*   [(#TEXTE|zoom_text{1,image})]
*
* Pour toute suggestion, remarque, proposition d'ajout
* reportez-vous au forum de l'article :
* http://www.spip-contrib.net/article342.html
*/

function zoom_text($texte, $level = 0, $type_lien = 'texte') {
        global $clean_link;
        global $zoom_lien_avant, $zoom_lien_apres;
	global $tailles;
        global $niveau;

        // On peut personnaliser la taille des polices
        // pour cela, définir les variables globales $tailles
        // dans ecrire/mes_options.php3
        tester_variable("tailles", array(1 => "100%", "120%", "160%"));

        if($level == 0)
                // si il n'y as pas de zoom sur l'article, on affiche pas les liens ou boutons de zoom.
                // et on renvoie le texte normal.
                return $texte;

        // On peut personnaliser la présentation de l'affichage des liens ou boutons de Zoom.
        // pour cela, définir les variables globales $zoom_lien_avant
        // et $zoom_lien_apres dans ecrire/mes_options.php3
        tester_variable("zoom_lien_avant", "<div align='right'>\nZoom texte<br>");
        tester_variable("zoom_lien_apres", "</div>\n");

        // si la variable niveau n'est pas défini dans l'URL,
        // on initialise la variable à 1, afin d'afficher le premier style.
        $niveau = max(1, intval($niveau));
        $taille_caracteres = $tailles[$niveau];

        // Conserver les variables $url, $niveau et $i dans le lien hypertexte.
        // la variable $border permet d'indiquer à l'utilisateur sur quelle zoom il se trouve.
        $zoom_lien = $zoom_lien_avant;
        
        for($i=1 ; $i<=$level ; $i++) {
                $clean_link->addVar('niveau', $i);
                $url = $clean_link->getUrl();
                switch($type_lien) {
                        case 'image':
                        $border = ($niveau == $i)?1:0;
                        $zoom_lien .= "<a href='".$url."'><img src='IMG/zoom$i.gif' border='".$border."'></a> ";
                        break;
                        case 'texte':
                        default:
                        $zoom_lien .= "<a href='".$url."'>zoom$i</a> ";
                        break;
                }
        }

        $zoom_lien .= $zoom_lien_apres;

        //modification du texte :
        $texte = preg_replace("/(class=\"spip\")/i", "\\1 style=\"font-size: ".$taille_caracteres.";\"", $texte, -1);

        return $zoom_lien.$texte;
}
?>

Personnaliser la présentation des liens pour les zooms

Ajouter les lignes suivantes dans le fichier ecrire/mes_options.php3 pour modifier l’aspect des liens de zoom :

$zoom_lien_avant = "<div align=\"right\">Cliquez sur les liens pour zoomer le texte<br>";
$zoom_lien_apres = "</div>";

Ajouter les lignes suivantes dans le fichier ecrire/mes_options.php3 poour modifier les tailles des caractères par niveau :

$tailles = array(1 => "200%", "220%", "360%");

en prenant soins de faire commencer le tableau par la clé 1.

Notes supplémentaires

Ce filtre ne remplace pas la fonction d’agrandissement de la police de caractère présente dans le menu d’affichage du navigateur. Il permet toutefois de cibler l’agrandissement sur la portion de la page contenant le #TEXTE.

Voici un exemple qui fonctionne si vous utilisez déja d’autres filtres sur votre #TEXTE. N’hésitez pas à vous en inspirer :

[(#TEXTE*|decouper_en_page|typo|propre|zoom_text{3,image})]

Une fois la fonction installée. Veuillez à bien vider le cache de SPIP.

Dernière modification de cette page le 1er novembre 2010