11548 sujets

JavaScript, DOM et API Web HTML5

[en cours] Galerie d'images

Pages :
J'utilise ta galerie sans me soucier de la source, ça fonctionne bien, c'est fluide, efficace. Impec.
Je désactive le JS, plus accès au "suivant/précédent" mais tout fonctionne, c'est toujours impec. Je désactive les CSS, j'ai tout sur la page, bon, ça fonctionne toujours, aucune perte d'info, c'est impec aussi Smiley cligne

Regardons au niveau "façon de faire", pour 4 photos, ça va, mais par contre, si on veut en ajouter plus, le système trouve vite ses limites, en effet, mettre 15 photos taille réelle sur la même page, "Aoucchhh" !!

En tout cas, je trouve le principe très séduisant et très efficace Smiley cligne
Faire des petites miniatures plutôt que "photo1" "photo2" ça serait sympa aussi Smiley cligne

Niveau code.... woow quelle tartine de JavaScript !!! D'après ce que j'ai testé (désactivation JS, CSS etc), c'est juste pour suivant/précédent, il doit y avoir moyen de faire plus condensé et largement nan ?
Je ne connais pas ton niveau en JS, donc je sais pas si tu as fais le max possible, où si c'est juste parceque tu ne connais pas super bien, à toi de nous dire Smiley langue

En tout cas, c'est assez chouette dans l'ensemble. si tu veux, on pourrait faire un melting pot de différentes choses ou je sais pas quoi pour faire un truc hyper cool. Mélange JS/PHP par exemple ou je sais pas trop quoi.

<edit>Je n'ai pas regardé le code JS, pas hyper trop de temps tout de suite, je peux pas donc vraiment juger de ce qui a été fait</edit>

<edit2>Galerie, un seul "l" Smiley cligne </edit2>
Modifié par Olivier (08 Apr 2005 - 21:35)
Selon moi, regrouper toutes les images sur la même page permet de visualiser les premieres photos pendant le "préchargement" des suivantes.
Même tu as raison néanmoins : cela peut s'avérer au total très lourd.

Je débute en effet en javascript, et il y a sans doute possibilité de faire mieux. Je suis d'ailleurs tout à fait motivé pour optimiser tout cela à l'aide de vos conseils.

Très bonne idée pour les miniatures autrement !

Merci pour ton retour très détaillé en tout cas. Smiley smile
Je corrige la faute d'orthographe. Smiley murf
Modifié par 20cent (08 Apr 2005 - 21:44)
Wé, donc, on a qu'à étudier ça ensemble (et les pros du JS, welcome to you !) et on fait un truc du tonerre Smiley lol
Je déplace ça dans le salon projet de groupe Smiley cligne
On redéplacera eventuellement ici après. (un nouveau topic sera plus adapté parcequ'on va pas mal le polluer avec les tests et tout ça Smiley cligne )
Déjà je repère une grosse faille dans ton script Smiley cligne

Pour récupérer le numero dans #imageX, tu fais un substring et tu découpe de "longueurchaine-1,longueurchaine", ça marche pour #imageX, mais pour #imageXX Smiley cligne comment tu fais Smiley lol

Je planche sur la question, mais c'est un peu chiatique en fait, j'ai du mal à voir comment faire pour isoler le nombre.
Oula oui ! Smiley confused
Bien vu ! Je vais y réfléchir si je peux de mon côté aussi, c'est pas pro. tout ça.
Modifié par 20cent (08 Apr 2005 - 22:45)
C'est bon, j'ai réglé la question autrement ^^

Je liste toutes les photos du diaporama dans un tableau.
Ensuite, je parcours le tableau, et si picArray[ i] == currentPic, alors je détermine previewPic et nextPic avec picArray[i-1] et picArray[i+1]
C'est plus élégant que du substring à gogo Smiley lol et puis comme ça, on peut nommer les id comme on veut.
Modifié par Olivier (08 Apr 2005 - 22:49)
Euh, je regarde ton script, et finalement, tu recharges la page à chaque fois :

document.location = diaporama.lastChild.lastChild.firstChild.getAttribute("href");

Smiley eek

(je calle au niveau de la création des éléments, je sais pas pourquoi, il m'affiche rien quand je fais ça : 

diaporama.appendChild(document.createElement("ul"));
diaporama.lastChild.setAttribute('id','controles');

remote = document.getElementById('controles');
remote.appendChild(document.createElement('li'));
remote.firstChild.appendChild(document.createElement('a'));	remote.firstChild.firstChild.appendChild(document.createTextNode('Image précédente'));
Olivier a écrit :
finalement, tu recharges la page à chaque fois

Non. Si tu regardes bien, je ne fais que me déplacer sur l'ancre de l'image voulue. La page n'est pas rechargée.
bah document.location... ça reload pas la page ??

<edit>... ahh bah nan Smiley lol , ça la modifie, et dans le cas des ancres, pas de reload... Hmm ça fout un peu mon truc en l'air en fait, j'aurais à repenser ça, ça devrait le faire. Je calle toujours au niveau de la création des éléments, je verrasis plus tard Smiley cligne </edit>
Modifié par Olivier (08 Apr 2005 - 23:19)
Ta création d'élément ne fonctionne pas car le "<li>" créé dans "#controles" est placé en dernière position de la liste (regarde sans la feuille de style). Smiley cligne
Modifié par 20cent (08 Apr 2005 - 23:22)
En fait j'ai fait autrement, et ça fonctionne Smiley lol

J'ai plus que la gestion du changement "suivant" "précédent" à l'affichage d'une nouvelle image. Je calle pour l'instant, mais c'est parcequ'il est tard Smiley lol , nul doute que demain je trouverais Smiley cligne enfin j'espere !
Bon, j'ai un truc qui fonctionne à peu près, mais c'est hyper bancale et je m'en contenterais pas Smiley lol

Aparement il existe pas de méthode destroyElement() comme il existe createElement().

Quelqu'un connait il une alternative pour supprimer un élément grâce au DOM ??
En fait ça existe et ça marche, c'est removeChild() Smiley cligne
J'arrive pas loin de la fin, il y a encore un truc qui me résiste (pas pour longtemps, yek yek yek).

bon, cette fois ci j'arrete pour ce soir Smiley langue
J'ai été malade (encore un peu d'ailleurs), et j'ai pas avancé ce que je devais finir, mais ça merdouille je sais pas pourquoi, c'est pas très logique Smiley ohwell

Je vais replancher sur mon système Smiley cligne
Petit message pour prévenir d'une petite mise à jour : le nombre d'image n'est plus limité à 9 mais à 99. Smiley smile
Pour le reste, c'est toujours un peu la même chose... Smiley langue
Modifié par 20cent (06 Jun 2005 - 14:02)
Pages :
Sujet clos
Aller à