Galerie d'images

Bonjour,

J'ai testé et mis en place (tant bien que mal) le tutoriel d'alsacreations sur la galerie d'images simple avec jQuery.

Je souhaiterais aller plus loin et afficher des caption au survol sur les zooms, un peu comme sur l'exemple suivant (une seule légende suffira ).

Plusieurs questions:
- dans le tutoriel d'alsacreations, comment créer une zone qui sera remplie avec du texte?
- sachant que les photos et leur légende sont alimentées via une base de données et que ma fonction jQuery est externalisée dansun fichier js, comment pourrais-je faire passer mes variables (de la base vers jQuery)?

Voilà, si une bonne âme peut m'expliquer…
Modifié par speedlab (16 Aug 2010 - 20:52)

Bonjour,

Pour la première question, il n'y a pas de réponse simple. Le tutoriel auquel tu fais référence (que tu as lu et compris à 100%, bien sûr?) ne prévoit pas cette fonctionnalité. Donc il faut développer ton propre script, ce qui demande du temps et de bonnes connaissances en JavaScript et jQuery.

Dans l'absolu, une «zone remplie avec du texte» ça peut être un simple élément DIV ou P que l'on met en forme en CSS.

Pour la deuxième question, tu peux «stocker» des données de deux manières pour qu'elles soient exploitables par JavaScript:
1. En écrivant un contenu HTML dans ta page. Par exemple tu peux avoir la vignette, le titre et la description de chaque photo dans ton code HTML; ensuite, en JavaScript, tu masque les titres et descriptions, et ne les affiche (éventuellement en les injectant dans des éléments différents à un endroit précis de la page) que dans certaines conditions (clic sur une vignette, par exemple).
2. En stockant les données dans des variables JavaScript. Ce qui implique de générer du code JavaScript dynamiquement (en PHP ou autre langage serveur utilisé). Tu peux stocker des données dans un Array, par exemple.

Si tout ça est du chinois pour toi, et si tu as copié-collé le code du tutoriel sans chercher (ou sans parvenir) à le comprendre, alors je te recommande fortement:
1. De laisser tomber cette galerie d'image pas adaptée à tes besoins, et de chercher un script différent qui s'en rapproche plus.
2. Ou bien de passer quelques dizaines d'heures à apprendre les bases de JavaScript, du DOM et de jQuery.

Florent V. a écrit :
Bonjour,
Le tutoriel auquel tu fais référence (que tu as lu et compris à 100%, bien sûr?) ne prévoit pas cette fonctionnalité. Donc il faut développer ton propre script, ce qui demande du temps et de bonnes connaissances en JavaScript et jQuery.

Je m'y attelle, mais c'est évident qu'il me manque les bonnes connaissances (et le temps, accessoirement )

Florent V. a écrit :
Dans l'absolu, une «zone remplie avec du texte» ça peut être un simple élément DIV ou P que l'on met en forme en CSS.

C'est bien ce que je compte faire: créer un élément qui recevra les infos de la photo...

Florent V. a écrit :
Pour la deuxième question, tu peux «stocker» des données de deux manières pour qu'elles soient exploitables par JavaScript:
1. En écrivant un contenu HTML dans ta page. Par exemple tu peux avoir la vignette, le titre et la description de chaque photo dans ton code HTML; ensuite, en JavaScript, tu masque les titres et descriptions, et ne les affiche (éventuellement en les injectant dans des éléments différents à un endroit précis de la page) que dans certaines conditions (clic sur une vignette, par exemple).

Cette solution sera certainement celle que j'utiliserai (plutôt que stocker les variables dasn un array js): certaines des infos sont déjà prévues ailleurs dans la page.

Florent V. a écrit :
Ou bien de passer quelques dizaines d'heures à apprendre les bases de JavaScript, du DOM et de jQuery.

Elles sont difficiles à trouver, ces dizaines heures... Voilà pourquoi mes questions; c'est sûr que je préfèrerais connaître le tout sans avoir à demander conseil

...En tous cas, merci pour les pistes!

Donc,
J'ai bien relu le tuto, et j'ai (presque) tout compris…

1) Je bute sur une phrase de Benjamin:

Benjamin De Cock a écrit :
nous allons définir la fonction highlight qui appliquera à l'élément qui l'appelle tout ce dont il a besoin pour se faire distinguer

Je ne comprends pas ce qu'il veut dire…

2) Ensuite, j'ai bien compris comment il récupère l'attribut href de la vignette cliquée (target = $this.attr("href");). Cependant, dans le lien sur mes vignettes, j'ai un attribut title que je n'arrive pas à récupérer (legende = $this.attr("title"); ne fonctionne pas).

3) Pour faire mes légendes sur zoom, j'ai commencé par ce code:

		$("#zoom").after( 
		$(document.createElement("div")) 
		.attr("class","caption") 
		.append(
				$(document.createElement("span"))
				.append(legende)
				)
		); 

L'idée est donc de récupérer le title de la vignette cliquée pour la passer en tant que legende par append(legende), d'où ma question 2)

Quelqu'un a peut-être une piste ou des réponses?