Créer un Pop-up avec Joomla

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
- JCE MediaBox est téléchargeable sur le site de SARKI : Télécharger le Plug In 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
Créatopn pop-up avec Joomla


Note sur les options :
Thème des pop-up : On peut choisir un Thème.

Theme Shadow
popup11

Thème standard ou squeeze
pop-up Joomla



OPTIONS POP-UP
pop-up avec joomla

OPTIONS INFOBULLE
pop-up avec Joomla

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 »


pop-up Joomla

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

popup7

Puis cliquer sur l’onglet « Popups »

popup8


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...