Fork me on GitHub






Comment rendre les images cliquables par défaut ?
Semi pro
Inscrit: 13/04/2006 23:26
De Aix en Provence
Messages: 1751
Bonjour,

J'ai ajouté une fonction (popimage pour ne pas la nommer) que j'appelle quand je veux rendre une image cliquable pour que cette dernière s'ouvre dans une popup en taille réelle (cf mon site).

Ca marche nickel, mais je dois entrer "à la main" en html l'évènement "onclick" dans le texte de l'article, ou du forum, pour l'activer quand je veux cette fonction pour une image.

Question:

Comment donner à toutes les image affichées cette capacité à être ouvertes en popup, en ajoutant cela à leur classe par défaut peut-être ?
Ou bien comment créer une classe qu'il suffit d'appeler dans l'éditeur de texte (mais pas en bbcode) ?

Posté le : 20/11/2010 10:52

signé: LionHell
Partager Twitter Partagez cette article sur GG+
Re: Comment rendre les images cliquables par défaut ?
Régulier
Inscrit: 26/02/2007 16:00
Messages: 494
Bonjour,

il faut modifier le fichier class/module.textsanitizer.php mais je ne vais pas plus loin car je ne sais pas quelle version de Xoops tu utilises?

A un endroit, tu as quelque chose qui doit ressembler à :
$patterns[] = "/[img]([^"()'<>]*)[/img]/isU";

puis, quelques lignes plus bas, son pendant (bien compter les patterns/remplacements pour tomber sur le bon!) de remplacement :
$replacements[] = '<a href="\1" target="_blank">\1</a>';

C'est cette ligne qu'il faut modifier et insérer ton code javascript du style "onclick='javascript:blalblaouvre(\\1);"

Sauvegarde bien le fichier initial avant toute modif! :roll: (et évite de le faire en direct sur un site en ligne)

Posté le : 20/11/2010 19:09

Portail en aquariophilie avec une passion pour le poisson clown en aquariums récifaux.
Partager Twitter Partagez cette article sur GG+
Re: Comment rendre les images cliquables par défaut ?
Aspirant
Inscrit: 14/06/2007 19:36
Messages: 35
plutot que modifier sanitizer qui serait aussi actif dans le reste de xoops, je jetterais plutot un oeil du coté de jquery
genre
$(document).ready(function() {
   
// toutes les images a ouvrir devront avoir la class mesimages
   
$(".mesimages").click(function() {
     
blablaouvre(this);
   });
 });

http://docs.jquery.com/Tutorials:Gett ... sing_selectors_and_events

Posté le : 20/11/2010 22:34
Partager Twitter Partagez cette article sur GG+
Re: Comment rendre les images cliquables par défaut ?
Semi pro
Inscrit: 13/04/2006 23:26
De Aix en Provence
Messages: 1751
Merci les gars, vos suggestions ont l'air très intéressantes .. je vais m'y plonger !!


Posté le : 20/11/2010 23:57

signé: LionHell
Partager Twitter Partagez cette article sur GG+
Re: Comment rendre les images cliquables par défaut ?
Semi pro
Inscrit: 13/04/2006 23:26
De Aix en Provence
Messages: 1751
Super ! J'ai finalement opté pour la solution jQuery qui permet de donner la possibilité d'agrandir en popup uniquement les images souaihtées ... et même en fait n'importe quel élément à qui l'on donnerait cette classe !!

Processus (simple en fait:

- uploader jquery.js sur son site, dans le répertoire js du thème (ou ailleurs mais il faudra adapter le chemin dans l'appel qui figure plus bas).

- uploader le fichier .js que vous aurez créé qui sera utilisé par jQuery et qui contient la fonction pour la popup.
Voici le code de la fonction:
Citation :
$(document).ready(function() {
// toutes les images a ouvrir devront avoir la class popup
$(".popup").click(function() {
titre = "Agrandissement";
adr = this.src;
w=open("",'image','width=1,height=1,toolbar=no,scrollbars=no,resizable=no');
w.document.write("<script type='text/javascript'>function checksize(){ if (document.images[0].complete){ window.resizeTo(document.images[0].width+30,document.images[0].height+80); window.focus();} else{ settimeout('checksize()',250) } }</script>");
w.document.write("<body onload='checksize()' onblur='window.close()' onclick='window.close()' topmargin=10 leftmargin=10 marginwidth=0 marginheight=0>");
w.document.write("<img src='"+adr+"' border='0' alt='image' />");
w.document.close();
});
});


- Dans theme.html du thème:

- inclure l'appel à jquery.js
Citation :
<script type="text/javascript" src="<{$xoops_imageurl}>js/jquery.js"> </script>


- inclure l'appel au fichier .js qui exécutera la fonction popup.
Citation :
<script type="text/javascript" src="<{$xoops_imageurl}>js/popup.js"> </script>



- dans style.css du thème:

- créer une classe .popup{} (vide).


UTILISATION avec tinyMCE:

Quand vous incluez l'image avec le gestionnaire d'images, dans l'onglet "apparence" champs classe choisissez "popup" et optionnellement dans le champs style saisissez "cursor:hand;" juste pour que le survol de l'image transforme le curseur.

C'est tout ! Facile ....

Merci à FFCLix et aquaportail dont la solution fonctionnait aussi, mais pour toutes les images du site, ce qui est gênant ...

Posté le : 22/11/2010 02:58

signé: LionHell
Partager Twitter Partagez cette article sur GG+
Re: Comment rendre les images cliquables par défaut ?
Semi pro
Inscrit: 08/06/2005 17:15
De Where ?
Messages: 513
petite correction dans les appels des js :
<script type="text/javascript" src="<{xoImgUrl js/jquery.js}>" charset="utf-8"</script>

et
<script type="text/javascript" src="<{xoImgUrl js/popup.js}>" charset="utf-8"</script>


à noter qu'à partir de la version 2.5.0, vous avez jQuery inclut dans le core, donc vous l'appelez de la façon suivante dans theme.html, juste avant xoops_module_header :
<{php}>
    global 
$xoTheme
        
$xoTheme->addScript("browse.php?Frameworks/jquery/jquery.js");
        
$this->assign('xoops_module_header'$xoTheme->renderMetas(nulltrue)); 
<{/
php}>

valable également si vous avez jQuery UI à appeler ou tout js ce trouvant dans le "Framework"

Posté le : 22/11/2010 08:29
Partager Twitter Partagez cette article sur GG+
Re: Comment rendre les images cliquables par défaut ?
Semi pro
Inscrit: 13/04/2006 23:26
De Aix en Provence
Messages: 1751
Merci pour les précisions Caradoc !
Pour info ça marchait aussi avec $xoops_imageurl.

Posté le : 22/11/2010 10:09

signé: LionHell
Partager Twitter Partagez cette article sur GG+
Re: Comment rendre les images cliquables par défaut ?
Semi pro
Inscrit: 08/06/2005 17:15
De Where ?
Messages: 513
Citation :

lionhell a écrit :
Pour info ça marchait aussi avec $xoops_imageurl.

Yep, mais cette variable est dépréciée, donc il faut éviter de l'utiliser et prendre les bonnes habitudes

Posté le : 22/11/2010 12:13
Partager Twitter Partagez cette article sur GG+
Re: Comment rendre les images cliquables par défaut ?
Aspirant
Inscrit: 14/06/2007 19:36
Messages: 35
ok avec caradoc, mais surtout parce que sinon on peut se retrouver avec 2 instances de jquery ( 1/ ca prolonge le chargement) avec les plugins qui ne seront pas dans l'instance qu'on pense (2 / alors là c'est le BORDEL).
un petit hack comme ca en passant pour ceux qui sont soucieux de la bande passante
Dans le fichier browse.php de la version 2.5
//Output now
header('Content-type: ' $types[$ext]);
if (
$ext="js"){
ob_start("ob_gzhandler"); // et zou on compresse
header('Cache-Control:public;max-age=3600'); // et on capitalise honteusement dans le cache
}
$handle fopen($file"rb");
while (!
feof($handle)) {
   
$buffer fread($handle4096);
   echo 
$buffer;
}
fclose($handle);


Posté le : 22/11/2010 16:58
Partager Twitter Partagez cette article sur GG+

 Haut   Précédent   Suivant



Vous pouvez voir les sujets.
Vous ne pouvez pas débuter de nouveaux sujets.
Vous ne pouvez pas répondre aux contributions.
Vous ne pouvez pas éditer vos contributions.
Vous ne pouvez pas effacez vos contributions.
Vous ne pouvez pas ajouter de nouveaux sondages.
Vous ne pouvez pas voter en sondage.
Vous ne pouvez pas attacher des fichiers à vos contributions.
Vous ne pouvez pas poster sans approbation.

Propulsé avec XOOPS | Graphisme adapté par Tatane, Grosdunord, Montuy337513

38 Personne(s) en ligne (27 Personne(s) connectée(s) sur Forum) | Utilisateur(s): 0 | Invité(s): 38 | Plus ...