La miniature et son popup

All contributions published for previous SPIP versions

Lorsqu’on utilise la génération d’images miniatures, une image insérée en tant que document a un lien permettant l’ouverture de l’originale (en taille réelle). Ce lien ouvre cette dernière à la place du contenu (Maj+clic est encore parfois inconnu...). Cette contribution permet d’ouvrir directement l’image dans un popup qui s’adapte à sa taille (compatible 1.7.2 -> 1.8.2e)

Exemple

Il s’agit d’un article sur une activité “pelote de rejection” de lamap22. Les travaux d’élèves sont insérés en tant que vignettes qui vont s’ouvrir dans des popups.

la pelote de rejection de lamap22

Installation

Dans le fichier “mes_fonctions.php3”, insérez le code suivant :

/*
 *   +------------------------------------------------------+
 *    Nom du Filtre :    popup sur vignettes
 *   +------------------------------------------------------+
 *    Date : janvier 2006
 *    Auteur :  pym aidé par Gaelead - pym40000@yahoo.fr                                   
 *   +------------------------------------------------------+
 *    Fonctions de ce filtre :
 *     Ouvre des popups à partir des vignettes
 *   +------------------------------------------------------+ 
 */

function popup($chaine) {

$motif = "/<a href='IMG\/(jpg|gif|png)\/([^']+)'>/";

	preg_match_all ($motif, $chaine, $tabresult);
	
	$to_return = $chaine;

	for ($i=0; $i< count($tabresult[0]); $i++) {
		
		$rep = $tabresult[1][$i];      
		$img = $tabresult[2][$i];      
                $dim_image = @GetImageSize('IMG/'.$rep.'/'.$img);
                $largeur_image = $dim_image[0]+20;
                $hauteur_image = $dim_image[1]+25;
		$zepop = '<a href="javascript:;" OnClick="javascript:window.open(\''.'IMG/'.$rep.'/'.$img.'\', \'_blank\', '
                .'\'toolbar=0, location=0, directories=0, status=0, scrollbars=0, resizable=0, copyhistory=0, menuBar=0,'
                .'width='.$largeur_image.',height='.$hauteur_image.'\')" >';
		
		$to_return = preg_replace("<".$tabresult[0][$i].">",$zepop,$to_return);
	}	

	return $to_return;
}
// FIN du Filtre popup sur vignettes

Ensuite il vous faut ajouter la fonction popup dans le fichier “article.html” de votre squelette : (#TEXTE|popup)

Et voilà c’est fini, c’est pas un popup “la classe qui se ferme tout seul et tout” mais la petite croix, les gens connaissent !

Explications

Il s’agit d’une fonction recherchant dans le texte les liens qui pointent vers les dossiers d’images et qui les remplace par un javascript ouvreur de popup.

En esperant que ça puisse vous servir !

Merci à Gaelead pour son aide et pas merci à lui pour le pack de Duvel.

updated on 29 April 2007

Discussion

8 discussions

  • 1

    Bonne idée cette contrib.
    Cela marche t il avec Spip 192d ?

    • Désolé pas pour le moment... ;) bientot j’espere!

    Reply to this message

  • Bravo et merci

    Par contre pour 1.9 pensez-vous l’adapter.

    Patrick ROUDEIX

    Reply to this message

  • 2

    Merci pour cette contribution très utile.
    Cela fonctionne bien sauf que chez moi cela ne marche qu’avec les images en documents joints. Y a t-il moyen de faire aussi avec les images incluses dans le texte ?

    PS : j’ai combiné cette contrib avec celle décrite ici [->http://www.spip-contrib.net/Redimensionner-les-images-d-un]

    Du coup j’obtient à la fois la réduction d’image et le popup sans avoir à mettre le code <code> popup </code>
    Cela ne marche toujours qu’avec les images en document joint.

    • Ben c’est vrai qu’en fait cette fonction n’est faite que pour les images insérées en tant que document. Les images intégrées dans le texte dans leur taille réelle ne sont pas concernées..

    • Je n’ai pas tout saisi sur l’implémentation dans le HTML, ou ça coince avec spip 1.8 ?

    Reply to this message

  • 1

    Bonjour,

    J’ai tenté d’installer cette fonction avec SPIP 1.9
    A priori, je ne vois pas ce qui ne colle pas. Remplacer une chaîne de caractères dans le texte me semble indépendant de la version de SPIP.
    Quelqu’un a-t-il une idée de ce qu’il faut modifier ou l’a déjà fait?

    • Je crois qu’avec la version 1.9.1 ya eu des changements pour la gestion des doc insérés dans les articles (avec les modeles). Je vais regarder ça de plus pres. Peut-etre que cette contrib va devenir un modele a partir de la version 1.9.1.

    Reply to this message

  • Très cool cette contrib.
    Y a plus qu’à intégrer le titre et la description du document dans la popup, mais mes connaissances en Javascript sont trop limitées...
    Je vais quand même essayer.

    A+

    Raphaël

    Reply to this message

  • Bonjour bonjour,
    c’est très utile cette contrib mais j’ai une question. :D

    Si le visiteur n’a pas javascript, le lien ne fonctionne pas... Y a t’il moyen que si le visiteur ne possède pas javascript, le lien redevienne comme avant ???

    Merci :)

    Reply to this message

  • 1

    Super pratique merci.

    Je l’ai testé avec un SPIP 1.8.2g et il faut obligatoirement insérer le doc dans le texte de l’article pour que cela fonctionne.
    J’ai tenté le coup dans une boucle DOCUMENTS avec #LOGO_DOCUMENT|POPUP (pour afficher mes docs joints ailleurs sur ma page) et cela ne fonctionne pas. Le lien créé vers le doc est : http://www.monsite.org/popup

    Donc ça c’est moins pratique car cela oblige à insérer les docs dans le texte un par un et ne convient pas pour les portfolio d’images.
    catherine

    PS j’ai ajouté le type MPG et indiqué resizable=1 car la taille de la vidéo n’est pas reconnue.

    Reply to this message

  • indispensable !

    Reply to this message

Comment on this article

Who are you?
  • [Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom