Ouverture de contenu au milieu d'une page [Résolu]

[n00dle]

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.

http://www.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 !

[danielhagnoul]

Bonsoir

Voir : http://api.jquery.com/append/

FAQ jQuery : http://javascript.developpez.com/faq/jquery/

[SpaceFrog]

load() ?

[n00dle]

Je ne comprend pas en quoi ton premier lien peut m'aider danielhagnoul
Vous n'auriez pas un tuto dans le quel on explique comme faire ce que je cherche ? On m'a parlé du spoiler mais cela s'utilise surtout pour du texte. Dans mon cas, ce sont plusieurs images qui vont apparaitrent. Et surtout, les éléments se remplace les uns les autres (si on ouvre le 2 alors que le 1 est ouvert, le 1 va se fermer automatiquement pour laisser sa place au 2 et ainsi de suite...)

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/

Merci pour votre aide !

[n00dle]

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

Code html :

1
2
3
<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

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(document).ready(function(){
 
    $('.imageBtn').click(function(){
    $.get($(this).attr('alt'), function(data){
 
        $('#travail').html(data);
        $('#travail').hide().slideDown(800);
 
    },'html');
 
        return false;
 
    });
 
})

[SpaceFrog]

oui un comment faire une usine à gaz qui peut se reduire en un seul load ...

[n00dle]

... ba ça serait sympa de m'expliquer alors stp

[SpaceFrog]

Code :

1
2
3
4
5
6
7
8
9
$(document).ready(function(){
 
    $('.imageBtn').click(function(){
    page=$(this).attr('alt')
    $('#travail').load(page, function(data){
       //ici une animation si besoin
     });
     });
 })

load permet directement de charge le contenu d'une page distante (ou partie du contenu) dans un element de la page et d'appeler un callback lorsque le chargement est terminé

[n00dle]

merci beaucoup !