28172 sujets

CSS et mise en forme, CSS3

Mise en forme d'une galerie, zoom+ défilement

Bonjour à tous, j'aurai besoin d'un petit coup de main ^^
Je me débrouille en html et css et j'espère que je vais pouvoir me contenter de ces deux langages dans ce cas là!
Je suis entrain de faire mon book (je fais des études de graphisme) et je souhaite faire un mur de miniature de mes créas, qu'au clic une pop up s'ouvre avec la créa en plus gros, une légende et la possibilité de fermer , comme sur ce site là

http://ithinkimight.com/

Au cas où il y aie des déclinaisons ou des mises en situation, je voudrais pouvoir les faire défiler dans cette pop up, à l'aide de deux flèche sous l'image.

Quelqu'un a une idée, je n'ai pas réussi à comprendre comment ça marchait sur le site exemple.

Merci beaucoup par avance.

Anaïs
Bonjour,

Pour faire un système de popup, il te faut du Javascript (c'est réalisable aussi en CSS mais pour la compatibilité sur les différents navigateurs, surtout dans ton cas puisque c'est un Book, ce n'est pas toujours évident à mes yeux).

Pour cela, je te conseille de regarder du côté de Fancybox qui est simple à mettre en place. Tout est expliqué sur le site. Smiley cligne
Modifié par j0r (31 May 2013 - 08:40)
Je te traduis rapidement les étapes pour le mettre en place :

- En premier lieu, copie le dossier "fancybox" dans le répertoire de ton site.

- Ensuite, il faut importer (si ce n'est pas déjà le cas) la librairie jQuery, il est conseillé de le faire ainsi :


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>


- Puis tu importes le fichier de la Fancybox :


<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>


Fais bien attention au lien en fonction de l'endroit où tu places le dossier !

- Après, il faut importer le fichier de style de la Fancybox :


<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />


- Pour appeler la Fancybox sur tes images, la syntaxe a respecter est la suivante :


<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>


Met surtout bien l'id du lien à "single_image" car c'est ce qui fait fonctionner le popup.

- Dernière étape pour que cela fonctionne, il faut appeler la fonction qui va générer le popup au clic en mettant dans ton "<head></head>" ceci :


<script type="text/javascript">
     $(document).ready(function() {
          $("a#single_image").fancybox();
     });
</script>


Sachant que si ça fonctionne, tu pourras ensuite préciser des paramètres spécifiques à la fonction pour la "personnaliser", comme par exemple le fait de cliquer dessus ferme le popup, ou encore afficher/ne pas afficher le titre de l'image, etc.

Tu trouveras la liste des paramètres possibles dans la rubrique "API & Options" du site.
Merci pour toutes ces précisions, je n'arrive pas à faire marcher le script. Au clic sur l'image, ça ouvre l'image dans une nouvelle fenêtre (que ce soit dans Safari ou dans Firefox). J'ai vérifié les liens,j'ai essayé en copiant la css de la Fancybox directement dans ma propre feuille de style.
Est ce que c'est normal que le script s'appelle "jquery.fancybox-1.3.4.pack.js" dans les explications alors que je n'en ai pas de ce nom là dans mon dossier fancybox (j'ai aussi essayé avec jquery.fancybox.pack.js, comme se nomme le fichier dans mon dossier, pas plus de résultat).

Merci Smiley smile

Anaïs
Sujet clos
Aller à