pitoo.com

Réaliser un "PopUp" sur une image...

Je vous propose de réaliser une fenêtre PopUp sur une image afin de pouvoir en afficher une vue détaillée.

Je vais vous présenter deux méthodes, la première ultra-simple fait appel à une fonction javascript, la seconde, un peu plus élaborée (et également plus élégante) utilise les feuilles de style CSS.

La méthode javascript :

Elle utilise un simple appel a la fonction javascript "window.open", cet appel sera realisé à partir d'une balise de lien "a" sur le déclencheur d'évènement "onClick".
Voici le code à insérer :

Notez les arguments passés à la fonction window.open :

  • '/images/blog/strass.JPG', l'emplacement et le nom de l'image ou de la page à ouvrir.
  • 'nom_de_la_fenetre', pour donner un nom à la fenêtre, sans reelle importance pour cet exercice.
  • 'height=420, width=620, scrollbars=no, menubar=no, resizable=no, toolbar=no, location=no, status=no, directories=no' paramètres de la fenetre à ouvrir : il est possible d'indiquer la taille de la fenetre a ouvrir en pixels et si l'on souhaite ou non afficher différents éléments de la fenêtre (les barres de défilement, la ligne des menus, le redimensionnement, la barre des outils etc...) pour cet exercice, tout est positionné à"no".


La méthode CSS :

Cette méthode donne un résultat plus élégant, en réalité, elle n'ouvre pas une nouvelle fenêtre, mais utilise le CSS pour afficher l'image au premier plan, devant le contenu de la page.
ce script nommé LightBox, je l'ai récupéré sur le site suivant :
http://www.dynamicdrive.com/dynamicindex4/lightbox/
le site de l'auteur :
http://www.huddletogether.com/projects/lightbox/

Instructions

Etape 1 : Inserez le code ci-dessous dans l'entête de votre page (entre les balises <HEAD> et </HEAD>) :

Etape 2 : Créez vos vignettes en code HTML. Plusieurs possibilités : avec/sans image, avec/sans titre :

Comme vous pouvez le constater, le code des vignettes consiste en une simple balise <a> avec son attribut "href" pointant vers l'image grande taille, un attribut supplémentaire rel="lightbox" pour différencier ce lien d'un lien classic, et finalement, un attribut "title" optionnel. Vous pouvez utiliser une vignette ou du texte.

Etape 3 : Dernière chose , ce script fait appel a quelques fichiers et images externes, auquel on a fait référence a l'étape 1 . Téléchargez lightbox.zip , puis placez-le dans un dossier sur votre site. Ensuite assurez-vous que les chemins indiqués dans l'étape 1 soient correctement établis vers ce dossier.
Pour information, lightbox.zip contient :

  • lightbox.js - le script principal.
  • lightbox.css - la feuille de style.
  • overlay.png - opacité à 80%, image carrée pour créer l'ombre.
  • loading.gif - l'animation.
  • close.gif - 'X' placé dans le coins supérieur droit de l'image.
Notes

Dans lightbox.js, il y a deux variables configurables, assurez-vous que les chemins soient exacts :

Exemples
en image ou en texte
Plus près de toi..