IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Création galerie


Sujet :

JavaScript

  1. #1
    Membre régulier
    Profil pro
    Inscrit en
    Novembre 2010
    Messages
    7
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Novembre 2010
    Messages : 7
    Par défaut 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 , 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

  2. #2
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 094
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 094
    Par défaut
    Bonsoir,

    Voilà une question hyper formalisée 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 ?

    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  3. #3
    Membre régulier
    Profil pro
    Inscrit en
    Novembre 2010
    Messages
    7
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Novembre 2010
    Messages : 7
    Par défaut
    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é

    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".

    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 !?

    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.

    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

  4. #4
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 094
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 094
    Par défaut
    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 :
    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 ?

    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  5. #5
    Membre régulier
    Profil pro
    Inscrit en
    Novembre 2010
    Messages
    7
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Novembre 2010
    Messages : 7
    Par défaut
    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...

    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 !?

  6. #6
    Expert confirmé
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 094
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 36
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 094
    Par défaut
    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 ? )

    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 js : Sélectionner tout - Visualiser dans une fenêtre à part
    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
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  7. #7
    Membre régulier
    Profil pro
    Inscrit en
    Novembre 2010
    Messages
    7
    Détails du profil
    Informations personnelles :
    Localisation : Suisse

    Informations forums :
    Inscription : Novembre 2010
    Messages : 7
    Par défaut
    Yeah super le fil conducteur, comme ça je sais ou chercher


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

    Merci encore

Discussions similaires

  1. Création d'une galerie web
    Par Romanodi13 dans le forum Langage
    Réponses: 51
    Dernier message: 12/01/2009, 19h07
  2. Création d'une galerie avec zoom de l'image
    Par Yepes dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 20/09/2008, 15h57
  3. [MySQL] Création catégorie pour galerie photo
    Par gozu13 dans le forum PHP & Base de données
    Réponses: 4
    Dernier message: 17/03/2008, 15h34
  4. [Galerie] Création d'une galerie photo
    Par saith dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 4
    Dernier message: 12/10/2007, 16h35
  5. [Galerie] Création galerie photo
    Par gidou dans le forum EDI, CMS, Outils, Scripts et API
    Réponses: 2
    Dernier message: 14/05/2007, 18h17

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo