Dudu Posté 30 Décembre 2005 Partager Posté 30 Décembre 2005 Salut à tous Dans le cadre d'une présentation, j'utilise le fabuleux système de slide show d'Eric Meyer, S5. Il s'agit d'une seule page HTML, couplé d'un côté à une CSS adaptée à une visualisation "kiosque", et de l'autre côté à un script JS qui permet une excellente fluidité. La page est conçue de la manière suivante: chaque "étape" de la présentation est contenu dans un <div class="slide"> sans aucune id particulière. Tous ces <div> sont masqués sauf celui sur lequel on se trouve. Le Javascript a pour rôle de déterminer quel <div> est affiché, et ainsi de pouvoir changer d'étape. Mon gros problème est que la navigation s'effectue par un menu déroulant, or je voudrais également associer une liste de navigation, avec de vrais liens texte. Il faudrait pour cela que j'adapte le code à mes besoins, et malheureusement j'en suis bien incapable (j'ai essayé des tonnes de trucs et c'est toujours un désastre ) Il existe bien un système qui permet de lier une étape particulière avec un URL de type "site.tld/slide.html#etape2" mais vu la conception particulière de la page, cela force le rechargement donc ruine instantanément la fluidité qu'apporte nativement S5. Amis Javascripteurs, aidez-moi ! Liens utiles: Exemple de slide Fichier slide.js D'avance un grand merci Lien vers le commentaire Partager sur d’autres sites More sharing options...
Dudu Posté 31 Décembre 2005 Auteur Partager Posté 31 Décembre 2005 Je viens de trouver ! En fait c'est hyper-simple et çà ne nécessite pas de modifier les fonctions Javascript. Il suffit tout bonnement d'écrire le lien de cette manière <a href="javascript:go(1);">Lien vers l'étape 1</a><a href="javascript:go(2);">Lien vers l'étape 2</a><a href="javascript:go(3);">Lien vers l'étape 3</a>... et çà fonctionne tout seul !! Et dire que j'ai bien faillu attraper une migraine à modifier le fichier de fonctions Comme quoi dès fois il ne faut pas chercher la complication... Puisse ce topic servir aux futurs utilisateurs de S5 Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sarc Posté 31 Décembre 2005 Partager Posté 31 Décembre 2005 Arf, j'allais te répondre exactement ce que tu as répondu... Je viens de tout recopier, fichier CSS par fichier CSS de l'exemple que tu donnais pour tester en local, quand j'ai vu les petites flèches en bas à droite Bon, tant mieux si tu as trouvé avant moi, ce n'est que partie remise ! Sympa n'empèche le S5, en plus ça a l'air d'avoir été debugué pour tous les navigateurs... Bon, bah je peux supprimer mon dossier en local EDIT : par contre, je me permets de poser une petite question : go(1) fait avancer d'une étape, et go(-1) fait reculer d'une étape, d'après les petites flèches de navigation du lien que tu as donné... Es-tu sûr que go(1) amène à l'étape 1, go(2) à l'étape 2 etc ? Il faudrait faire une petite soustraction avec l'étape actuelle pour choisir le chiffre à mettre dans go non ? Lien vers le commentaire Partager sur d’autres sites More sharing options...
Dudu Posté 31 Décembre 2005 Auteur Partager Posté 31 Décembre 2005 Salut sarc Sympa n'empèche le S5, en plus ça a l'air d'avoir été debugué pour tous les navigateurs... Oui extrêmement sympa. Je le vois souvent utilisé par beaucoup de sites (anglo-saxons pour la plupart -mais que font les frenchies?-) pour des présentations linéaires. Jusque là je n'avais pas eu l'occasion de le tester personnellement, mais c'est un vrai plaisir.Et oui effectivement, il passe sur tous les navigateurs, même les pires EDIT : par contre, je me permets de poser une petite question :go(1) fait avancer d'une étape, et go(-1) fait reculer d'une étape, d'après les petites flèches de navigation du lien que tu as donné... Es-tu sûr que go(1) amène à l'étape 1, go(2) à l'étape 2 etc ? Il faudrait faire une petite soustraction avec l'étape actuelle pour choisir le chiffre à mettre dans go non ? Mais c'est que tu as raison Damned, ma question reste donc d'actualité Je me disais aussi c'était trop simple ... edit: plutôt que de créer une seule et unique liste qui s'adapterait à l'aide d'une fonction, je vais faire une liste par étape en remplissant les nombres adéquats, ce sera moins prise de tête. Merci sarc pour le coup de main ;-) Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sarc Posté 31 Décembre 2005 Partager Posté 31 Décembre 2005 Salut Dudu ! Après une petite nuit de sommeil, j'ai re-regardé le petit javascript... Il existe en fait la fonction goTo(target) qui semble faire ce que tu veux... J'étais en train de m'embêter à modifier la fonction go (en enlevant le + à la ligne snum += step;) quand j'ai vu juste en dessous goTo... Quel joli nom explicite ! Bref, d'après mes tests, ça marche en plus ! Donc tu peux utiliser tes liens <a href="javascript:goTo(0);">Lien vers l'étape 1</a><a href="javascript:goTo(1);">Lien vers l'étape 2</a><a href="javascript:goTo(2);">Lien vers l'étape 3</a>... Attention, ça commence bien à 0... Normalement ça devrait fonctionner comme ça ! Lien vers le commentaire Partager sur d’autres sites More sharing options...
Monique Posté 31 Décembre 2005 Partager Posté 31 Décembre 2005 Bonjour, C'est vrai que ce système est fabuleux, d'autant plus que le contenu est totalement accessible S5 = Simple Standards-Based Slide Show System Je le vois souvent utilisé par beaucoup de sites (anglo-saxons pour la plupart -mais que font les frenchies?-) <{POST_SNAPBACK}> Ben ils l'utilisent aussi - Editer sur le Web - Personnalisation des sites sous SPIP (et un Squelette S5 Slide Show) - SPIP et accessibilité (très beau en plus de son intérêt !) - Exemples de blogs d'entreprises - Quels outils pour travailler en réseau ? - Coulisses d'un jeu vidéo, deux présentations sur la programmation de jeux vidéo Tristan Nitot l'utilise aussi, mais je n'ai pas d'exemple à donner. Il y a aussi des traductions de slides anglophones : - S5: Une introduction (traduction de la présentation d'Eric Meyer) - Développement Web avec Firefox Enfin, on trouve présentation, tutoriels et exemples de scripts sur Framasoft : S5 et S5 + Presentacular Lien vers le commentaire Partager sur d’autres sites More sharing options...
Dudu Posté 1 Janvier 2006 Auteur Partager Posté 1 Janvier 2006 Çà marche à merveille avec goTo ! Merci ! Merci Monique pour tous ces liens, je viens déjà d'en visiter quelques-uns et ils sont au moins aussi intéressants que le script qu'ils utilisent (je ne connaissais que "SPIP et accessibilité" ) Lien vers le commentaire Partager sur d’autres sites More sharing options...
Anonymus Posté 2 Janvier 2006 Partager Posté 2 Janvier 2006 Il y a aussi des traductions de slides anglophones :- S5: Une introduction (traduction de la présentation d'Eric Meyer) Il me semblait bien qu'il était francais Pour info, les fleches apparaissent dans la version francaise, mais pas dans la version anglaise. Dommage. Par contre, ca parait intéressant, mais pas seulement pour les présentations A noter le bouton 'select', d'accès rapide. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Dudu Posté 3 Janvier 2006 Auteur Partager Posté 3 Janvier 2006 Salut Il me semblait bien qu'il était francais Pour info, les fleches apparaissent dans la version francaise, mais pas dans la version anglaise. Dommage. Qui est français ? Je n'ai pas tout saisi .. Pour les flèches, elle n'apparaissent qu'au survol du coin bas-droit de la page. Lien vers le commentaire Partager sur d’autres sites More sharing options...
Monique Posté 10 Janvier 2006 Partager Posté 10 Janvier 2006 Bonjour, Via la liste W3Qc-public (on se renvoie la balle, n'est-ce pas Denis ), des systèmes analogues : - DOMSlides, avec quelques retours sur le blog - les Slide tools proposés par le W3C Lien vers le commentaire Partager sur d’autres sites More sharing options...
Sujets conseillés
Veuillez vous connecter pour commenter
Vous pourrez laisser un commentaire après vous êtes connecté.
Connectez-vous maintenant