Afficher une image grand format dans un popup en cliquant sur un thumbnail (vignette)

Publié le par PêUR

Mise à jour le 22/01/2006 00:19

Cette article à pour but d'expliquer comment créer un popup à partir de FCKeditor. Dans cet article, je prendrais pour exemple l'affichage d'une image grand format dans un popup en cliquant sur un thumbnail...

Un bloggeur demandait récement comment faire pour cliquer sur une image petit format afin d'obtenir une image grande format. (Voir le fil ici ) Zoélie  proposait 2 solutions très intéressantes:

la première consistait à insérer une petite image et de mettre un lien vers la même image en grand format, la deuxième consistait à utiliser un rollover.

Je vous propose de re-expliquer la première solution mais en utilisant un popup

1 / Le vif du sujet

Tout d'abord, dans un article vous devez insérer une image (version vignette) de l'image que vous voulez voir dans le popup, par exemple:

 Image petit format

Puis sélectionnez cette image en cliquant une seule fois dessus. Des "poignés" apparaissent alors:

Image petit format sélectionnée

Cliquez, dans la barre d'outils sur le bouton "Insérer/modifier lien" Insérer/modifier Lien la fenêtre "propriétés de Lien" apparait:

Propriétés de Lien - Information sur le Lien

Remplir le champs URL avec l'URL de votre image grand format. Pour récupérer l'URL de votre image vous pouvez aller voir cet article

Sélectionnez le 2ème onglet "Destination":

Propriétés de Lien - Destination

Dans la liste déroulante "Destination" sélectionner  <fenêtre popup> la fenêtre devient:

Propriétés de Lien - Destination - <fenêtre popup>

 Vous pouvez maintenant compléter les champs suivants:

  • Nom de la fenêtre popup: Ce n'est pas le nom qui apparaitra dans la barre de titre du popup! C'est juste pour donner un identifiant à cette fenêtre. Il ne faut pas qu'il comporte d'espace ou de caractères exotiques.
  • Taille modifiable coché: le popup pourra être redimensionné
  • Barre d'adresses coché: la barre d'adresse apparaitra
  • Barre de menu coché: la barre de menu apparaitra
  • Barre de défilement coché: les barres de défilement apparaitront si le popup est plus petit que son contenu
  • Barre d'état coché: la barre d'état apparaitra
  • Barre d'outils coché: la barre d'outils apparaitra
  • Plein Ecran (IE): génère un popup plein écran (comme la touche F11) uniquement sous IE
  • Largeur et Hauteur, permettent de spécifier la taille du popup
  • Position gauche, position haut: permettent de spécifier la position du popup par rapport au coin supérieur gauche de l'ecran de l'internaute

2 / Finalité

Si vous voulez un vrai popup de la taille de l'image, je vous conseille de ne cocher aucune case et de renseigner les champs largeur et hauteur avec la largeur et hauteur de l'image qui va être afficher par le popup. Dans mon exemple 600x520.

On obtient:

Image finale 

3 / Limitation

  • Attention si vous êtes sous Firefox, et que vous gérez l'affichage par onglet, le popup s'ouvrira dans un nouvel onglet
  • Selon le paramétrage antipopup des internautes, le popup peut ne pas s'afficher (prévoir par exemple un lien vers l'image sans passer par un popup).
  • Liste non exhaustive....

 


 Articles connexes:  

 

Publié dans Faq

Commenter cet article

Catherine 01/10/2006 22:21

merci beaucoup je vais regarder cela de plus près. En attendant, j'ai créé un texte avec photoshop et je l'ai enregistré en Jpeg et cela a marché (conseil de Denis sur forum over-blog). Vraiment sympa tous tes conseils

PêUR 02/10/2006 19:40

Très bon conseil ;-)

Catherine 30/09/2006 10:00

non je suis en privilège. Peux-tu m'expliquer comment faire ? j'ai vu plus haut dans les commentaires qu'on devait utiliser le bloc-notes (si j'ai bien compris) et tu donnais un code mais je ne voyais pas à quel endroit introduire le texte; Et pour le titre ? je ne suis pas douée, je glane des infos à droite à gauche mais pour appliquer ce n'est pas toujours évident.

PêUR 30/09/2006 18:19

Avec le bloc note tu peux créer une page html très facilement. Plutôt que de t'expliquer comment faire dans ce commentaire, je te propose d'aller voir sur le site du zéro et plus particulièrement sur cette page  qui explique comment créer une page html.Bon courage.

Catherine 29/09/2006 17:06

1 je veux créer une vignette avec une photo. j'aimerais qu'elle ait un titre et quand on cliquerait dessus, il y aurait du texte comme sur ce blog (le joueur du mois) http://vafc-en-l2.over-blog.com/#nogo
est-ce possible ? merci de m'aider

PêUR 29/09/2006 17:24

C'est possible! Mais pour cela il faut pouvoir hébeger le fichier HTML qui s'ouvre dans le popup.Si tu es en mode confiance, tu dois passer par un hébergeur gratuit comme le fait le blogmestre de ton exemple (à savoir chez Free)

Catherine 28/09/2006 23:35

Bonsoir
je voudrais ajouter un titre à mon pop-up qui se verrait quand l'image est réduite (je ne sais pas si c'est très explicite) et quand on cliquerait sur l'image, celle-ci serait remplacée par un texte, est-ce possible ? et comment faire ? merci de me répondre

PêUR 29/09/2006 16:16

Bonjour,je n'ai pas très bien compris ce que tu souhaitais faire?!!? As-tu vu un exemple sur la toile? Si oui as-tu le lien qui y redirige?

babo 04/09/2006 13:55

J'ai ma réponse c'est oui mais ma méthode passe à partir du mode privilège car je met la vidéo dailymotion dans une page html.

PêUR 05/09/2006 23:04

Et voilà... résolu ;-)