11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

j'ai déjà suivi quelques tuto sur alsacreations et Raphael m'a conseillé de venir m'inscrire sur le forum pour y poser mes questions (et pouvoir finir mon site)
Je suis actuellement en train de faire mon portfolio. N'y connaissant rien en web à la base, j'ai réussi à avancer mais je peine à le finir. Principalement parce que je sais exactement ce que je veux mais que je ne sais pas comment le faire.

L'idée est donc de faire un portfolio en "trois volets" sur une page. J'ai un menu à gauche (A). En cliquant sur une rubrique, une barre verticale s'ouvre contenant des vignettes (B). En cliquant sur une vignette, je l'ouvre en grand dans la partie restante à droite avec un commentaire en bas (C).

Mon problème ce situe en B et C. Comment exactement faire apparaitre une barre verticale et mes vignettes dessus. Puis comment faire pour qu'en cliquant sur mes vignettes, on ouvre en grand l'image à droite avec un commentaire dessous. Le tout, bien sur, en restant sur une seule page. J'avais initialement créé plusieurs pages mais cela ne correspond pas à ce que je souhaite mettre en place.
Voici concrètement l'idée :
upload/41033-Site1.png
Partie A (déjà réalisé)
upload/41033-Site2.png
Partie B
upload/41033-Site3.png
Partie C

A noter que le site n'est pas encore hébergé. Je fais tout en offline.
Merci

Cordialement
Modifié par Somnium (20 Oct 2011 - 15:59)
Merci pour ta réponse. Je savais qu'il faudrait passer par du Javascript. Le soucis c'était comment exectement. Je n'y connais rien en Javascript.

Concernant la gallerie, c'est exactement cela. Maintenant comment l'intégrer à la partie B et ajouter un commentaire en dessous de l'image agrandie. J'imagine qu'il faut que ça fasse partie du javascript en C.

Je garde cette galerie de côté en tout cas. Encore merci.
Bonjour.

Effectivement avec un petit peu de javascript ça pourrait être fait, et plus précisément avec le framework Jquery ça pourrait être fait rapidement et "assez" facilement.

Alors d'une manière un peu plus technique maintenant :
- ton bandeau B pourrait par exemple être "caché" derrière ton menu A (avec un z-index en css), et suite à un clic (évenement jquery) sur ton menu le bandeau pourra apparaitre (animate de jquery)
- et suite à un clic sur ton bandeau B, il serait assez facile de faire apparaitre seulement ton contenu désiré.

Tout ton contenu peut être sur une seule page, la magie consistera simplement à caché tous les éléments que tu n'as pas besoin.

En espérant t'avoir aidé, et si tu as besoin de plus de précision, n'hésite pas.
Bonjour,
Somnium a écrit :
Le soucis c'était comment exactement. Je n'y connais rien en Javascript.

Deux pistes:
1. Travailler avec un développeur.
2. Apprendre JavaScript.
Modifié par fvsch (25 Oct 2011 - 15:25)
Bonjour et merci SolidSnake pour ta réponse.
J'ai à peu près compris le principe (en théorie). En gros je dois mettre tout mes éléments sur la même page mais ils seront "cachés" puis apparaîtront tour à tour au clic.
En effet cela peut convenir.

Donc concrètement il me faut cacher mes éléments (donc trouver un tuto).
J'ai trouvé Jquery mais que dois-je chercher ensuite ? L'évènement clic et le animate ?
La gallerie que me proposait dionysos fonctionnera de cette manière ?

Merci
Bonjour,

vous dites que c'est du Javascript qu'il faut ici et/ou du JQuery, etc..

Hum... Peut-être..., mais bon,... - et oui, entendu, ça n'engage que moi - mais il me semblerait plutôt que ce serait quand même bien plus du ressort de PHP tout de même, associé à une lightbox derrière par exemple :

-> Vignettes cliquables en grille, affichage dynamique des images en grand via des variables (un champ dans la table de la BDD et une récupération via l'url),etc...
De la sorte, inutile de s'empêtrer avec cette colonne verticale supplémentaire avec les vignettes et de cette astuce afficher/masquer, etc... :

- On fait ses dossiers diaporamas et leurs deux sous-dossiers "vignettes" et "affiches" et on y mets leurs images respectives.
- On crée sa table dans la BDD
- On crée sa page et on lie l'ensemble à la BDD.
On met alors les liens de départ dans la colonne de gauche, et lorsqu'on clique sur l'un ou l'autre, les vignettes des diaporamas respectifs s'affichent à droite.
- On clique sur les vignettes et un slideshow s'ouvre (utomatique et/ou cliquable image par image).

Ca me paraît vraiment plus carré comme solution.

Maintenant, oui, en effet, étant donné le peu de connaissance de la personne qui demande ces avis, ça va être difficile, voire impossible à lui faire- faire....
Je souscris donc à l'avis de fvsch : contacter un développeur ou apprendre le php...

Maintenant, si c'est assez urgent, le mieux est d'en passer par les CMS pour les gens qui ignorent tout du web : les wordPress et autres Joomla... Il y a dedans tous les kits prêts à l'emploi pour ce genre d'interaction et d'affichage, comme pour des diaporamas donc.

WordPress FR ici

Joomla FR ici

J'espère avoir aidé. Bien amicalement,
Neum
Je vous réponds et par la même à fvsch (qui malgré son statut d'admin m'a paru être un troll à ne pas prendre en compte...).
Pour faire plus simple, je viens sur ce forum pour être orienté dans mes choix par des gens qui connaissent tout cela mieux que moi. Pour être renvoyer vers des tuto ou que l'on m'explique vers quoi chercher. Comme l'on fait Dionysos et SolidSnake. Je pensais que le partage de connaissance était l'objectif principal de ce genre de forum.

Donc fvsch...
1. Je ne connais pas de développeur qui travaille gratuitement et étant étudiant je n'ai pas les moyens de payer un dev. Je cherche juste des conseils...
2. Je n'ai ni le temps ni l'envi d'apprendre un langage qui ne me resservira probablement jamais. Ce n'est pas mon métier. Je cherche juste des conseils...

Neum, en ce qui concerne votre suggestion de php. De même, c'est un langage que je ne connais pas. Votre explication est probablement très accessible à un connaisseur mais pas à moi.
Toujours est-il que votre solution me fait me poser une question. L'évolution ? Pour ce que j'en ai compris pour l'instant, le javascript semble assez simple à gérer. J'ai visiblement une ligne à rajouter au code pour mettre à jour mon site (ajout ou retrait d'image). Quand est-il de votre solution en php ? Est-ce aussi simple ? En tout cas merci de me proposer une autre option.

Pour finir, je connais les CMS, mais ce n'est pas l'objectif. J'aurai peut-être du les préciser dès le départ.
Mon but est de réaliser mon site moi même (avec un peu d'aide du coup Smiley cligne ) par défi personnel et aussi pour être sur d'avoir ce que je voulais au final. Mon principal soucis, n'est pas de ne pas connaitre les langages. J'ai réussi grâce au tuto d'Alsa à commencer et à rédiger de l'html et du css sans pour autant être un expert. Le soucis c'est que je ne sais pas vers quoi m'orienter, ni ou le trouver pour continuer. Si vous avez des tuto ou des idées de script qui pourrait convenir alors je suis preneur. J'essaierai de me débrouiller avec et si je n'y arrive pas je reviendrais vers vous.