Afficher une image dans une fenêtre "popup"

Introduction

Dans un artile de votre blog vous avez la possibilité de mettre des images, et parfois vous aimeriez que cette image s'affiche en plus grand pour avoir plus de détails.

Pour cela vous devez enregistrer votre image sous deux formats différents :

  • Un première fois dans un format qui s'intègre bien pour illustrer votre texte, disons en 300x200 pixels.
  • Une seconde fois pour l'afficher dans son format d'origine, par exemple 800x600 pixels.

Dans tous les cas ces images doivent peser entre 250 et 300 Ko maximum et être au format JPG. Leur nom ne doivnet pas comprter d'accents ni d'espace (ces derniers peuvnet être remplcés par le tiret du 8 _) 
Vous pouvez réduire votre image en partant de l'image la plus grande, en aucun cas vous ne pouvez agrandir une image en partant du plus petit format, cela vous donnerait une image dégradée.

Toutes ces imges peuvent désormais être placées dans votre espace dédié de votre blog; Leur nombre n'est pour l'instant pas limité.

Comment faire apparitre cette image dans une fenêtre "popup"?

Se rendre dans le gestionnaire de média :

inserer ue image

Et procéder comme expliqué sur cet article : Guide pour l'utilisation du gestionnaire de médias en choisissant votre petite image.

Il va falloir maintenant créer un lien sur cette image pour afficher la même image mais dans son format plus grand dans une "popup".

Choisissez le gestionnaire de lien :

gestionnaire de liens

Ceci vous ouvre cette fenêtre : 

 gestionnaire de liens

 Cliquer sur le gestionnaire de fichiers : cela vous ouvre une fenêtre qui afficche tous vos fichiers.
Choisissez vote image grand format, puis allez dans l'onglet "Popups" et sélectionnez "Popups JCE Mediabox"

ATTENTION : L'utilisation d'une fenêtree "popup" ne fonctionne bien qu'avec une image, il ne faut surtout pas l'utiliser sur un linen renvoyant sur un site.
Si vous voulez renvoyer vos lecteurs sur un autre site, vous ne devez pas utiliser cette fonction "Popups" mais modifier la cible du lien pour "Afficher vers une nouvelle fenêtre" qui aouvrira un nouvl onglet dans le navigateur du lecteur.

lien vers nouvel onglet

Exemple d'une image devant s'afficher en "popup" :

computer problem g6b7451677 8000Pour cette exrecice, je n'ai choisi qu'une seule image à l'origine de 800x518 pixels que j'ai réduit en 400 de large en laissant coche "Proportionnel" ce qui réduit l'affichage à ces dimensions.
Dans l'onglet "popups" j'ai choisi cette image, mais sans modifier sa dimension, ce qui l'afficche donc dans ses dimensions originales.

exemple popup

Fin de ce turoriel

 

Crée le

Créé le
Mardi 11 Mars 2025

Auteur

Créé par
Blogueur

Modifié le

Modifié le
12 Mars 2025

Vues

Affichage
589 fois
  • Notation
    Note moyenne
    • 1
    • 2
    • 3
    • 4
    • 5