Template Creator CK

Créez vos propres templates Joomla! avec Template Creator CK

Templates Joomla!

ebook_128

Téléchargez le livre de création de templates Joomla!

320 pages de Documentation technique, 2 Tutoriels pour créer les templates Joomla!, et 3 templates inclus

Maximenu CK

logo_maximenuck

Créez votre Megamenu Joomla! avec Maximenu CK. Multicolonnes, multirangés, chargement de module, nombreux effets, thèmes responsive.

Note utilisateur: 0 / 5

Etoiles inactivesEtoiles inactivesEtoiles inactivesEtoiles inactivesEtoiles inactives
 

Compatibilité Joomla! joomla! 1.7

Lors du développement d'un composant on a parfois besoin de sélectionner et uploader une image sur le site et récupérer son chemin dans un champ. On a la solution de coder un outil soi meme, ou alors d'utiliser le media manager intégré dans Joomla qui fait très bien son travail.

L'idée est que lorsque l'on clique sur un lien ça ouvre le media manager et après sélection de l'image on récupère son chemin dans un champ de formulaire.

On ajoute l'appel à la librairie modal qui permet d'afficher une lightbox.

JHTML::_('behavior.modal');

Ensuite on crée un lien qui va utliser la classe 'modal' pour s'ouvrir dans la fenêtre lightbox et qui pointe vers le media manager de Joomla!

<a class="modal" href="administrator/index.php?option=com_media&view=images&tmpl=component&e_name=test" rel="{handler: 'iframe', size: {x: 570, y: 400}}" >Ouvrir le media manager</a>
<input id="test" type="text" />

Dans le lien on retrouve une variable 'e_name=test' qui définit l'ID du champ dans lequel on récupère la valeur du chemin de l'image.

Pour parfaire le tout on doit définir une fonction javascript 'jInsertEditorText' pour traiter le résultat. Cette fonction est appelée lorsque l'on clique sur le bouton 'Insérer' du media manager. On écrit la fonction dans l'entête <head> de la page

function jInsertEditorText( text, editor ) {
                var newEl = new Element('span').set('html',text);
                var valeur = newEl.getChildren()[0].getAttribute('src');
                $(editor).value = valeur;
            }

La variable text contient la valeur du chemin de l'image et la variable editor contient l'ID du champ à remplir comme défini précédemment.

Et normalement c'est tout, on clique sur le lien, la fenêtre s'ouvre et lors du clic sur Insérer le champ test se rempli avec le chemin de l'image du type 'images/stories/monimage.jpg'.

 

 

Mentions légales

Site réalisé par Cédric KEIFLIN

Mentions légales

Copyright © 2010 - 2011

http://tutoriels-joomla.joomlack.fr n'est ni affilié à Open Source Matters ou au projet Joomla ni approuvé par eux.
Le nom Joomla!® est utilisé sous license limitée de Open Source Matters, le propriétaire mondial de la marque de commerce.

Compteur de visites

mod_vvisit_counterNombre de visiteurs1552664

Qui est en ligne

Nous avons 8 invités et aucun membre en ligne