Ouverture de contenu dans une page (jquery)
n00dle
Messages postés
5
Statut
Membre
-
mimigenie Messages postés 1180 Date d'inscription Statut Membre Dernière intervention -
mimigenie Messages postés 1180 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
Je suis étudiant dans une école de communication et d'art à Fribourg (Suisse) et je suis en train de réaliser mon portfolio pour présenter mon travail.
J'ai réalisé la maquette (le visuel) et je viens de commencer le code mais je me demande comment réaliser (je ne sais pas trop comment l'appeler) une insertion de contenu. Pour comprendre facilement sans que j'ai a vous expliquer mon problème, je vous laisse regarder le site suivant. Lorsqu'on clic sur un projet, un espace s'ouvre pour afficher le projet. Je me demande aussi comment faire pour qu'il n'y en ai qu'un seul qui soit affiché : lorsqu'on en a ouvert un et qu'on clic sur un autre, il le remplace.
https://jdetraz.com/
Je pense qu'il faut créer des <div> englobant chaque projet, leur donner une hauteur de 0px et de créer une animation d'ouverture avec jQuery lorsqu'on clic sur la miniature correspondant au projet.
Je connais parfaitement html et css mais je ne sais presque pas coder en jQuery (je ne fais qu'utiliser la bibliothèque pour installer des plugins).
Merci de votre aide !
Je suis étudiant dans une école de communication et d'art à Fribourg (Suisse) et je suis en train de réaliser mon portfolio pour présenter mon travail.
J'ai réalisé la maquette (le visuel) et je viens de commencer le code mais je me demande comment réaliser (je ne sais pas trop comment l'appeler) une insertion de contenu. Pour comprendre facilement sans que j'ai a vous expliquer mon problème, je vous laisse regarder le site suivant. Lorsqu'on clic sur un projet, un espace s'ouvre pour afficher le projet. Je me demande aussi comment faire pour qu'il n'y en ai qu'un seul qui soit affiché : lorsqu'on en a ouvert un et qu'on clic sur un autre, il le remplace.
https://jdetraz.com/
Je pense qu'il faut créer des <div> englobant chaque projet, leur donner une hauteur de 0px et de créer une animation d'ouverture avec jQuery lorsqu'on clic sur la miniature correspondant au projet.
Je connais parfaitement html et css mais je ne sais presque pas coder en jQuery (je ne fais qu'utiliser la bibliothèque pour installer des plugins).
Merci de votre aide !
3 réponses
-
Utilise le principe du spoiler.
Tu mets chaque projet dans une div mais tu rajoutes un attribut style="display:none;" pour cacher le texte.
Ensuite tu utilises un bouton/lien/image pour faire apparaitre le texte.
Il existe plein de script disponible sur internet.
-
merci ! je ne sais pas trop comment rechercher. tu pourrais me donner un lien avec un script propre avec des explications en français (si possible) s'il te plait ? il n'y a pas que du texte à cacher, il y aura également des images et un "j'aime" facebook. et il faut qu'il y ai une animation :)
-
Voila une piste : https://openclassrooms.com/forum/sujet/un-spoiler-88950
-
-
sur mon actuel portfolio j'ai quelque chose qui s'approche de ce que je veux faire mais il manque des animations toutes jolies et si possible un loader
http://www.nerval.ch/ -
j'ai pu faire quelque chose qui fonctionne mais le problème c'est que l'animation freeze :S
j'ai créer une zone d'accueil pour les éléments qui vont être chargés à l'intérieur. Ces éléments chacun sur des fichiers différents que j'indique dans le alt des images.
HTML
<div id="travail"></div>
<img class="imageBtn" alt="travail1.php" src="images/astronaut.jpg" />
<img class="imageBtn" alt="travail2.php" src="images/astronaut.jpg" />
JQUERY
$(document).ready(function(){
$('.imageBtn').click(function(){
$.get($(this).attr('alt'), function(data){
$('#travail').html(data);
$('#travail').hide().slideDown(800);
},'html');
return false;
});
})
-
-
Bonjour,
C'est l'animation du jquery qui freeze ? -
oui. et j'ai rencontré un autre soucis : lorsque j'ouvre un de mes travaux, j'ai écrit une fonction jquery qui me ramène au sommet de la page. lorsqu'on scroll, la fonction jquery empêche de descendre et ramène continuellement en haut de la page. (seulement durant 1-2sec environ, et pas à chaque fois :S)
