Création galerie

Version imprimable

02/12/2010, 19h29
lir93

Création galerie

Bonjour à tous,

But :

Je suis entrain de développer un site web, et l'on m'a demandé de concevoir une galerie interactive et fonctionnant avec une base de données MySql...

Ce que j'ai déjà fait :

Avec PHP j'ai récupéré les liens des images depuis ma base de donnée et je les ai placés dans un tableau PHP, avec une boucle j'ai affiché mes images, redimensionnés grâce une fonction, dans des div (vignette).
Au sommet des div (vignette) ce trouve une grande div qui fait office de conteneur pour l'image qu'on aura décider de regarder.

Ce qui reste a faire :

Ce que je souhaiterais c'est que quand je clique sur mes petites div (vignette) ça me les affiches en grand dans ma grande div et que quand je clique sur les boutons "Suivant" et "Précédent" que ça m'affiche l'image suivante ou précédente dans ma grande div...

Là où j'ai besoin de votre aide :

Comment faire pour que quand je clique sur "Suivant" ou "Précédent" mon image change.

Comment faire pour que quand je clique sur une vignette l'image ce mette dans la grande div.

Conclusion :

J'espère avoir bien décrit mon problème, si jamais vous n'arrivez pas a visualiser je vous mettrais le site en ligne pour que vous pussiez vous rendre compte.

Et je ne cherche pas une solution toute pré mâché prêt a fonctionner, quoique si quelqu'un souhaite me faire une cadeau pour noël :D, non plus sérieusement si vous me mettez simplement sur la piste avec des petites indications histoire que je ne m'égare pas en route, j'ai la prétention d'y arriver :)

Merci, bonne soirée ;)
02/12/2010, 20h50
Watilin

Bonsoir,

Voilà une question hyper formalisée 8O Mais je crois qu’il va falloir affiner encore les spécifications ^^

Est-ce que tu veux que ça soit fait en JavaScript, ou seulement avec des liens hypertexte classiques ?
Est-ce que tu veux que ça soit fait en Ajax ?
Est-ce que tu veux que ça soit animé ?
Est-ce que tu veux utiliser un framework, ou au contraire ne pas en utiliser, ou alors tu t’en fous ?

;)
03/12/2010, 18h41
lir93

Citation:

Voilà une question hyper formalisée Mais je crois qu’il va falloir affiner encore les spécifications ^^

Moi qui aurais juré n'avoir rien oublié :)

Citation:

Est-ce que tu veux que ça soit fait en JavaScript, ou seulement avec des liens hypertexte classiques ?

Pas sur d'avoir bien saisie la question, mais ce que je ne veux pas c'est que je doive recharger la page à chaque clique, il faut que ce soit dynamique, par conséquent je répondrais, "il faut que ce soit fait en JavaScript".

Citation:

Est-ce que tu veux que ça soit fait en Ajax ?

Pourquoi pas ! J'y avait pas autrement réfléchis... Mais je te répondrais par une autre question : Est-ce que AJAX contrairement à JavaScript peut être bloqué par les navigateurs !?

Citation:

Est-ce que tu veux que ça soit animé ?

Si tu entends par animé, une petite zone de chargement précédent l'affichage d'une image, ou un effet "hover" quand on passe la souris, pourquoi pas, là encore c'est une optimisation à laquelle je n'avais pas vraiment réfléchis.

Citation:

Est-ce que tu veux utiliser un framework, ou au contraire ne pas en utiliser, ou alors tu t’en fous ?

Sachant les difficultés d'adaptation qui ce pose quand on apprend le fonctionnement d'un framework, je préférerais éviter !

Si il y a d'autre question j'y répondrais volontiers, merci d'accepter de m'aider ;)
08/12/2010, 19h12
Watilin

En fait j'ai un peu orienté insidieusement mes questions, car je connaissais déjà à peu près les réponses. Mais ça permet d'écarter les zones d'ombre :)

Par exemple, ta question :

Citation:

Est-ce que AJAX contrairement à JavaScript peut être bloqué par les navigateurs !?

En fait Ajax n'est pas un langage, c'est plutôt un concept. Ça siginifie Asynchronous Javascript And Xml, en français « JavaScript et XML asynchrones ». Donc : ça utilise JavaScript.
De plus, JavaScript peut être bloqué par les navigateurs ! Par exemple, sous Firefox :

Préférences > onglet Contenu > décocher la case « Activer JavaScript ».

C'est pour ça que ça peut être bien de prévoir une version « hypertexte pur ».

En ce qui concerne l'animation, je voulais surtour savoir quel type d'animation tu cherches à obtenir. Un indicateur de chargement c'est faisable, et même fortement conseillé avec Ajax ; des effets de zoom et de translations, ça fait partie des trucs laborieux qui se font plus efficacement (en termes de temps de travail) avec un framework.

J'ai une denière question. Tu veux une galerie dynamique ; je vois deux façons de la faire, la première sans Ajax, la seconde avec.
La première consiste à charger toutes les images en une seule fois, toutes étant masquées sauf une, et de jouer sur l'affichage en JavaScript.
La seconde consiste à ne charger que la première image, et à appeler les autres via Ajax seulement quand c'est nécessaire.

La première solution va être plus facile à mettre en œuvre, mais posera problème si la galerie est relativement grande : il va y avoir beaucoup de trafic réseau d'un seul coup, et un ralentissement/freeze/crash (rayez les mentions inutiles) potentiel, coté client, avec une machine pourrie (j'ai vécu ça).

La seconde est plus technique car utilisant Ajax, et sera moins fluide à l'utilisation, car il y a le temps de chargement entre deux images. Mais avec toutes les applications Ajax aujourd'hui, l'utilisateur a l'habitude…

Donc ma question est : quelle solution tu choisis ?

;)
08/12/2010, 21h03
lir93

Citation:

En ce qui concerne l'animation, je voulais surtour savoir quel type d'animation tu cherches à obtenir.

En terme d'animation j'imaginais un simple indicateur de chargement, pour le moment du moins... Je veux faire les choses par étapes...

Citation:

Donc ma question est : quelle solution tu choisis ?

Suite à ce que tu m'as expliqué je vote pour Ajax... Même si je sens que je vais le regretter xD

Alors je doit commencer par ou !? :D
09/12/2010, 20h50
Watilin

Bonsoir !
Alors je ne vais pas te faire un tuto, il y en a des tas sur le Net, mais plutôt te guider dans les grandes lignes et dans les détails vicieux. Dès qu'un mot te paraît important, fouille-le sur Google et tu apprendras des trucs ;)

Concernant la définition exacte d'Ajax, il y a deux écoles. Les uns disent qu'une application est Ajax quand ça utilise l'objet XMLHttpRequest ; les autres considèrent qu'on fait de l'Ajax dès lors que le script fait des requêtes (bien sûr, sans que ça conduise à un rechargement de la page). La différence est subtile, mais ton cas est bien adapté pour la comprendre.
Je suis plutôt de la seconde école : je pense que toute requête faite par le script, même sans passer par XMLHttpRequest, est de l'Ajax. (question piège : l'Ajax synchrone, c'est quoi ? :roll:)

Dans ton cas, on ne va pas utiliser XMLHttpRequest, car l'animal ne sait transporter que du texte, or il nous faut des images. Nous allons utiliser… Image !

Code:

var img = new Image();

Il faut que tu attaches une fonction de rappel à ton image, sur son attribut onload, pour pouvoir réagir au moment où son chargement se termine. Le chargement commence quand tu remplis l'attribut src.

Pour le chargement initial de la page, il suffit que tu envoies le code HTML de la première image. Ton script réagira aux évènements click sur les flèches gauche/droite, pour créer de nouvelles Image en temps voulu.

En ce qui concerne l'indicateur de chargement, le plus couramment utilisé est un gif animé, souvent appelé spinner, que tu fais apparaître au début du chargement et disparaître à la fin. Il peut être positionné dynamiquement ou seulement avec CSS.

Et euh… je crois que c'est tout. Il y aura peut-être des problèmes de fonctions de rappel qui ne se déclenchent pas si l'image est déjà en cache, mais si ça arrive, nous réglerons ça plus tard !

Ah, j'ai failli oublier le plus important : comment insérer les nouvelles images dans la page ! Les objets créés avec Image sont en réalité des objets du DOM, donc il faut utiliser les méthodes du DOM pour les insérer. Tu auras sans doute besoin de insertBefore ou appendChild.

Et pour masquer une image, tu as le choix entre jouer sur le CSS display, ou la retirer du DOM. Je te conseille la première option, car elle permet d'éviter une nouvelle requête si l'image est déjà dans le DOM. Mais pour savoir si elle y est, il faudra le tester, ce n'est pas automatique !

Bon courage ;)
10/12/2010, 17h30
lir93

Yeah super le fil conducteur, comme ça je sais ou chercher :)

T'as assuré ! Je te tiens au courant de l'avancement...

Merci encore ;)