Ouverture de contenu dans une page (jquery)
n00dle
Messages postés
5
Date d'inscription
Statut
Membre
Dernière intervention
-
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 !
A voir également:
- Ouverture de contenu dans une page (jquery)
- Supprimer une page dans word - Guide
- Page d'ouverture google - Guide
- Imprimer tableau excel sur une page - Guide
- Créer une page facebook - Guide
- Comment traduire une page - Guide
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.
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.
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)
http://www.nerval.ch/
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;
});
})