Aide pour Fancybox

Bonjour, je suis un peu débutant.

Je veux avoir des images qui s'affichent en grand quand le curseur passe sur les vignettes, comme sur ce site par exemple

Il me semble que fancybox fait ça, J'essaye de comprendre avec ce faq :
http://fancyapps.com/fancybox/

Ma question est où place t'on les trois codes ? Sur la même page ?
Apparemment le code fait appel à un fichier css qui est manquant, non ?

Bonjour.

Si tu veux afficher simplement ta photo au hover de l'image, tu n'auras pas besoin de fancyBox (qui fait un peu artillerie lourde dans ton cas), un simple petit bout de code jQuery suffira.
Je te propose d'aller voir un exemple tout fait ici
En plus de pouvoir télécharger directement le code, il est expliqué juste en dessous.

Je pense que ça pourra t'aider.

Après concernant les appels, il te faudra déjà appelé jQuery, puis le petit code dans un autre fichier JS. Les appels se feront au mieux juste avant la fin de ton body. Et le CSS directement dans le reste du CSS du site (ou au pire dans un autre fichier)

SolidSnake a écrit :
Bonjour.

Si tu veux afficher simplement ta photo au hover de l'image, tu n'auras pas besoin de fancyBox (qui fait un peu artillerie lourde dans ton cas), un simple petit bout de code jQuery suffira.
Je te propose d'aller voir un exemple tout fait ici
En plus de pouvoir télécharger directement le code, il est expliqué juste en dessous.

Je pense que ça pourra t'aider.

Après concernant les appels, il te faudra déjà appelé jQuery, puis le petit code dans un autre fichier JS. Les appels se feront au mieux juste avant la fin de ton body. Et le CSS directement dans le reste du CSS du site (ou au pire dans un autre fichier)

Merci, j'ai à peu près compris le code. J'imaginais pas que c'était aussi complexe (que ça faisait appel à un répertoire javascript), je pensais qu'il y avait une manière plus simple avec les nouveaux attributs html5. A priori pour ouvrir dans une petite fenêtre on est obligé de faire appel à du javascript, non ? Il n'y a aucune nouvelle balise html5 qui fait ça, ou je me trompe ?

Bon il ne me reste plus qu'à l'adapter à mon site.
Modifié par fraiddd (07 Sep 2013 - 22:42)

Cela dépend jusqu'à quel point tu veux "copier" le principe. Tu pourrais aussi bien faire ça en css, mais la grande image ne suivrait pas le curseur de la souris par exemple (ainsi qu'au niveau de référencement, ça serait pas gégé)

Voici, en version ultra-light :

<img src="maPetiteimage1.jpg" class="maPetiteImage">
<img src="maGrandeImage1.jpg" class="maGrandeImage">

<img src="maPetiteimage2.jpg" class="maPetiteImage">
<img src="maGrandeImage2.jpg" class="maGrandeImage">

<img src="maPetiteimage3.jpg" class="maPetiteImage">
<img src="maGrandeImage3.jpg" class="maGrandeImage">

En CSS:

.maGrandeImage {
  display:none;
}

.maPetiteImage:hover + .maGrandeImage {
  display:block;
}

Après dès que tu veux charger dynamiquement du contenu comme une image, tu es obligé de gérer en JS.

J'ai trouvé ça aussi qui fonctionne sans javascript:
http://cssdemos.tupence.co.uk/image-popup.htm

Mais j'ai noté 2 problèmes avec les deux:

1. quand les vignettes se trouvent sur la partie gauche de la page, les images agrandies s'affichent correctement mais quand elles sont plus sur la droite, elles sont rognées par le navigateur (si le tooltip s'affiche à droite évidemment).

2. certes il y a moyen d'y remédier avec ce code :

/***To make it look neater we used :nth-child to set a different left distance for each image***/ 
ul.enlarge li:hover:nth-child(2) span{
left: -100px; 
}
ul.enlarge li:hover:nth-child(3) span{
left: -200px; 
}

mais le problème est que je suis obligé d'imbriquer mes images dans un tableau et là ça ne marche plus

pour que les vignettes en partie doite puissent s'afficher en grand sans être rognées, la meilleure astuce que j'ai trouvé c'est de changer position:absolute; par position:fixed; mais elles s'affichent tout en haut à gauche.
La commande margin: auto; ne marche pas mais peut être que je l'intègre pas au bon endroit...