Suite à la demande d'un de mes clients, je vous propose ce petit tutoriel pour réaliser facilement un pop-up avec Joomla. Nous allons voir comment après avoir inséré une image dans un article, nous pourrons l'agrandir sous forme de pop-up.
[Tutoriel Joomla] Comment créer un pop-up pour son site web Joomla ?
L'Editeur de texte de Joomla : JCE editor
Il faut au préalable installer le composant JCE et son PlugIn :
- JCE Editor est téléchargeable sur le site Internet de SARKI : Télécharger le composant JCE Editor : http://www.sarki.ch/jce/
- JCE MediaBox est téléchargeable sur le site de SARKI : Télécharger le Plug In JCE MediaBox : http://www.sarki.ch/jce2/telecharger/jce-mediabox
Installer JCE editor et le plugIn JCE MediaBox, n'oubliez pas d'activer ce dernier dans le « Gestionnaire des PlugIn ».
Quelques mots sur le PlugIn JCE mediaBox : JCE MediaBox est un plugIn de scripts complémentaires à JCE. Il permet l'affichage d'informations sous forme de Pop-ups ou d'Infobulles. Il doit être utilisé avec le composant JCE.
JCE - Plug IN
CONFIGURATION DU PLUG IN JCE MediaBox
Dans le « Gestionnaire des PlugIn », configurer le PlugIn JCE MediaBox
« System – JCE MediaBox », l'ouvrir et le configurer comme suit :
OPTIONS GENERALES
Note sur les options :
Thème des pop-up : On peut choisir un Thème.
Theme Shadow
Thème standard ou squeeze
OPTIONS POP-UP
OPTIONS INFOBULLE
SAUVER
Dans le gestionnaire d'articles Joomla
DANS L’ARTICLE
1. Créer un nouvel article ou ouvrir un article existant dans le Gestionnaire d’articles.
2. Insérer une image dans l’article avec l’éditeur de de texte JCE.
3. Sélectionner l’image, et cliquer sur le « Lien – Insérer ou modifier un lien »
Le Gestionnaire de Liens s’ouvre :
Sélectionner l’image que vous souhaitez voir apparaitre agrandie dans le pop-up, ici, l’image est images/icone/restauration.png
Puis cliquer sur l’onglet « Popups »
Choisir pour :
Type : Popups JCE MediaBox
Titre : le titre du pop-up
Légende : saisir le texte qui s’affichera sous l’image
Dimensions : saisir les dimensions de l’image, pour l’exemple : 520x260 pixels, décocher « Proportionnel »
Puis « Mettre à jour »
Enregistrer et fermer l’article.
Aller voir le résultat sur la page où s’affiche l’article, et cliquer sur l’image concernée par le pop-up.
Il y a bein entendu d'autres méthodes pour réaliser un pop up dans le CMS Joomla...