Sujet Précédent Sujet Suivant

Ouverture de contenu dans une page (jquery)

Fermé
n00dle Messages postés 5 Date d'inscription lundi 2 janvier 2012 Statut Membre Dernière intervention 3 janvier 2012 - Modifié par n00dle le 2/01/2012 à 18:59
mimigenie Messages postés 1180 Date d'inscription dimanche 3 janvier 2010 Statut Membre Dernière intervention 4 août 2018 - 2 févr. 2012 à 22:04
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 !
A voir également:

3 réponses

Réponse 1 / 3
mimigenie Messages postés 1180 Date d'inscription dimanche 3 janvier 2010 Statut Membre Dernière intervention 4 août 2018 312
2 janv. 2012 à 19:48
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.
0
n00dle Messages postés 5 Date d'inscription lundi 2 janvier 2012 Statut Membre Dernière intervention 3 janvier 2012
Modifié par n00dle le 2/01/2012 à 22:53
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 :)
0
mimigenie Messages postés 1180 Date d'inscription dimanche 3 janvier 2010 Statut Membre Dernière intervention 4 août 2018 312
3 janv. 2012 à 10:40
Voila une piste : https://openclassrooms.com/forum/sujet/un-spoiler-88950
0
n00dle Messages postés 5 Date d'inscription lundi 2 janvier 2012 Statut Membre Dernière intervention 3 janvier 2012
Modifié par n00dle le 3/01/2012 à 15:49
merci mais le code ne marche pas... et je ne suis pas sur de pouvoir faire quelque chose d'opti avec le spoiler. on m'a parlé de load() et append(). Cela vous donne des idées de comment je pourrais réaliser ce que je veux ?
0
n00dle Messages postés 5 Date d'inscription lundi 2 janvier 2012 Statut Membre Dernière intervention 3 janvier 2012
3 janv. 2012 à 15:53
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/
0
n00dle Messages postés 5 Date d'inscription lundi 2 janvier 2012 Statut Membre Dernière intervention 3 janvier 2012
3 janv. 2012 à 16:08
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;

});

})
0
Réponse 2 / 3
AssassinTourist Messages postés 5710 Date d'inscription lundi 16 janvier 2012 Statut Contributeur Dernière intervention 29 février 2024 1 310
2 févr. 2012 à 14:27
Bonjour,
C'est l'animation du jquery qui freeze ?
0
Réponse 3 / 3
n00dle
2 févr. 2012 à 21:17
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)
0
mimigenie Messages postés 1180 Date d'inscription dimanche 3 janvier 2010 Statut Membre Dernière intervention 4 août 2018 312
2 févr. 2012 à 22:04
il faut trouver une façon pour que la fonction jquery que tu as écris ne s'active que dans des conditions précises ( un bouton par exemple, ou autre ) sinon ca part un peu dans tout les sens.
0

Discussions similaires

[référencement] Ne pas être référencé
kij_82 -
Searaphina -

10 réponses
Chemin Logo du site de la Cité de l'espace
Keiios -
blux -

11 réponses