| Re: Comment rendre les images cliquables par défaut ? |
Titre du sujet : Re: Comment rendre les images cliquables par défaut ?
par lionhell sur 22/11/2010 02:58:06
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 ...
|
|
