[javascript] slideshow images et textes en pur javascript.

AnsuzPeorth · Le 03/04/2012, à 17:05

Bjr,
Voulant me frotter de plus prêt à javascript (et un peu par besoin), j'ai codé un slideshow 'par recouvrement' (z-index).
On peut choisir la direction du recouvrement et l'emplacement du texte.
La vitesse de défilement des images et du texte sont réglables séparément.
screen

Lien version1: http://gwebradio.googlecode.com/files/slideshow.zip
Lien version2: http://gwebradio.googlecode.com/files/slideshow2.zip

Toutes critiques bienvenues, je ne suis pas expert en javascript (ni en autre choses d'ailleurs !)

Thx,

Dernière modification par AnsuzPeorth (Le 07/04/2012, à 11:38)

CKDevelop · Le 04/04/2012, à 15:17

yop merci poulet je test de ce pas sur le site de La Locale je te fait un retour dans la journée ++

temps · Le 04/04/2012, à 22:40

Le code fonctionne sous Epiphany et sous Iceweasel, maintenant je vais regarder son contenue, je reviens poster après.
Cordialement

moths-art · Le 04/04/2012, à 23:57

C'est sympa mais maintenant ce genre de chose se fait avec jquery et le plugin cycle : http://jquery.malsup.com/cycle/.
C'est 10 à 15 ligne de code "propre" maximum pour la même chose et tu as la garantie que ça passe sur la majorité des navigateurs...

AnsuzPeorth · Le 05/04/2012, à 07:28

Merci pour les retour.

moths-art a écrit :

C'est sympa mais maintenant ce genre de chose se fait avec jquery et le plugin cycle : http://jquery.malsup.com/cycle/.
C'est 10 à 15 ligne de code "propre" maximum pour la même chose et tu as la garantie que ça passe sur la majorité des navigateurs...

Vi, je sais bien, mais comme je l'ai signalé, je voulais me coller de plus pret à javascript. Alors avant d'utiliser un framework pour manipuler le dom, je pense qu'il faut avant connaitre un minimum javascript ! Utiliser qqles fonctions JS n'est pas connaitre JS (je m'en suis bien rendu compte en utilisant les class, enfin pseudo class, bien moins souple qu'en python par exemple !)
De plus, ca m'embête un peu d'embarquer le framework complet + plugins juste pour une petite animation ...
J'ai regardé les effets proposé par ce plugins, et il n'y a pas l'effet que j'utilise ici. (mais je suis entièrement d'accord, jquery m'aurait fait économisé 50% de code), mais ne mettons pas la charrue avant les boeufs ...

Dernière modification par AnsuzPeorth (Le 06/04/2012, à 00:46)

moths-art · Le 06/04/2012, à 14:34

Certes, Jquery est un peu lourd quand on veut faire des choses triviales comme un slideshow effectivement.
Je me demande si il n'existerais pas un préprocesseur pour nettoyer le superflus...

Maintenant, comme mentionné plus haut : c'est cross-navigateur et ça c'est vraiment intéressant quand t'es en flux tendu pour sortir quelque chose... tu vas pas avoir encore des mauvaises surprises avec tel ou tel navigateur.

Et puis, tout dépend ton approche : si tu travailles dans le web par exemple, le client va te refaire un ajout qui lui paraîtra anodin et qui en réalité te demandera de sortir l'artillerie lourde en incluant Jquery.
Du coup, tu pesteras de ne pas l'avoir inclus d'office et éviter d'inutiles souffrances.

Perso, je l'inclus d'office maintenant... je ne m'embête plus.
(quand on regarde la place que ça occupe avec le plugin Firebug Yslow, je me dis que c'est souvent dérisoire face à des images, des polices etc. et puis faut se dire que c'est gardé dans le cache du navigateur)

Tu évoques le DOM mais en réalité Jquery a sa propre approche et il n'est plus vraiment nécessaire de connaître le DOM pour cela.(sauf si tu veux améliorer le framework ou créer des extensions)

ex : au lieu de document.getElementById(#monid), en Jquery tu utiliseras seulement $(#monid)

AnsuzPeorth a écrit :

J'ai regardé les effets proposé par ce plugins, et il n'y a pas l'effet que j'utilise ici.

sisi mais c'est sur que c'est pas non plus servi sur un plateau.

L'idée d'apprentissage n'est pas mauvaise et ayant commencé en javascript bien avant Jquery, mon avis est sans doute biaisé. (la localisation du topic l'est peux-être moins...)
De toute façon, avant de se lancer tête baissé dans un framework, quel qu'il soit, il vaut mieux "bien" connaître le langage sous-jacent car on risque vite de déchanter dès qu'on commence à faire des choses pointus.

AnsuzPeorth · Le 07/04/2012, à 11:37

Maintenant, comme mentionné plus haut : c'est cross-navigateur et ça c'est vraiment intéressant quand t'es en flux tendu pour sortir quelque chose... tu vas pas avoir encore des mauvaises surprises avec tel ou tel navigateur.

Ce n'est pas négligeable, c'est sur ... Bien que dans qqles temps, logiquement, tout le monde devraient respecter la norme w3c ...Logiquement !

Tu évoques le DOM mais en réalité Jquery a sa propre approche

Vi, j'y ai déjà regardé un peu, je trouve que ca ressemble à elementTree (lib python pour le dom, mais de qui la poule ou l'oeuf). Et si mes souvenirs sont bons (pas sur là), on peut aussi utiliser la syntaxe Xpath avec jquery ?

Mais tu prêches un convaincu, je voulais juste faire qqles chose d'un peu plus gros qu'une simple fonction JS. Et bien m'en a pris, j'ai pu voir les petits incovenient des classes en JS. Par exemple le truc de _self = this, pour l'invocation de setTimeout en y passant des arguments. C'est un peu pret la même chose pour eval d'ailleurs !

Tiens, au sujet de eval, vu que tu dois toucher un peu en JS, j'ai un bug (ou plutôt une incompréhension).
Ce qui suit ne fonctionne pas.

t = 'this.'+this.currentElement.sliding+'SlidingLauncher';
eval(t);

Par contre, ce qui suit passe bien !!!

eval('this.'+this.currentElement.sliding+'SlidingLauncher')

Là, faut qu'on m'explique

Enfin bref, sinon, j'ai ajouté qqles animations différentes (fondu et 'growing'). J'avais mis en place le tout pour pouvoir ajouter plus d'options, mais c'est galère, bcp de code pour pas grand chose, alors je vais laisser tel que, ca suffira pour un simple slideshow.
Le code est plus propre, à mon gout. J'ai lu, je ne sais plus où, que l'accès aux propriétés d'un élément était très gourmand en ressource, alors j'ai réduit ces commandes au maximum dans ce code. Plus trop de répétion, mais c'est encore améliorable je pense (mais on perdrait en lisibilité)

Je verrais pour faire mieux avec jquery, plus tard ...

Le lien: http://gwebradio.googlecode.com/files/slideshow2.zip

nerim · Le 01/06/2012, à 13:00

Bonjour,
Tout d'abord merci et bravo pour ce code
J'avais besoin d'un diaporama avec fondu enchainé pour le site de mon fils et je me suis lancé dans un développement en javascript que je connais assez mal. J'étais parti sur la piste de 2 div mais je ne m'en sortais pas vraiment. Quand je suis tombé sur votre code j'ai décidé de l'adapter à mon cas. Mais comme je ne maitrise pas du tout la programmation objet et les instanciations je n'ai pas voulu trop toucher à votre code.
J'ai réussi à supprimer le texte par une bidouille sur son emplacement et j'ai désactivé le player.
Puis j'ai ajouté un peu de php pour que le srcipt aille chercher automatiquement les images dans un dossier transmis en paramètre...

Et ça marche... sous Firefox, mais pas sous IE.

J'ai vu que dans la feuille de styles, la classe .back-trans intégrait à la fois
opacity:0.7;
et
filter:alpha(opacity=70);

J'ai donc ajouté dans la fonction opacitySlide
en plus de divStyle.opacity = op;
divstyle.filter=alpha(opacity=op*10);
mais cela ne donne rien

Je ne pense pas que ce soient mes modif qui sont en cause puisque sur votre site votre site le diaporama n'apparait pas sous IE.

Si vous avez une idée, je suis preneur.

Merci d'avance

Cordialement
Jean

PS : si vous voulez voir le résultat sous firefox, vous pouvez aller ici et aller sur le menu Galeries et Diaporama Gyspynoia

AnsuzPeorth · Le 02/06/2012, à 11:56

Bjr,

Vi, je me doute que sous IE ca ne fonctionne pas, mais j'ai pas pu faire d'essais (sous wine, pas de JS), fait chier qd même que IE ne respecte pas le w3c ... (bien que IE > 9 le respecte mieux il parait ...!).
De plus, il y a eu un peu pret 500 download, et juste 4 ou 5 retour, donc dans ces conditions, dur de débuguer !

Bref, pour faire une simple animation, je pense que mon script est peut être un peu lourd (car il y a plusieurs effet, le text, le lecteur), alors que pour vous, un simple fondu est nécessaire. Regardez du coté de jquery, pour faire un simple fondu, c tres simple, il doit même y avoir des exemples tout fait sur le web, et plus de soucis avec IE !

Avec 2 div, pour un simple fondu, ca devrait suffire. z-index bien sur ...

Si vraiment vous n'y arrivait pas, j'essaierai de le faire vite fait, mais pas avant le milieu de semaine prochaine.

PS: pas mal le site ...

nerim · Le 05/06/2012, à 12:18

Bonjour,

Merci pour votre réponse

Finalement, en m'inspirant du principe de votre script (2 div avec image de fond) j'ai écrit un petit script qui fonctionne sous IE6 et 9, opera, chrome et firefox.

En fait je n'utilise pas z-index : div1 est toujours au premier plan et l'opacité de div2 est toujours au maxi. Quand l'image est pleine (opacité maxi de div1), je copie le fond de div1 dans celui de div2 (l'opération ne se voit pas car div2 est cachée) puis je définit l'opacité de div1 à 0 et je place l'image suivante dans div1 (là encore l'opération ne se voit pas puisque div1 est invisible), l'opacité de div1 augmente...

le nom du dossier contenant les images, le temps de pause, le titre de la page et la durée du fondu sont passés en arguments à l'appel de la page diaporama.php.

Le script est visible sur la page diaporama.php accessible à partir de la page galeries (lien vers le site dans mon message précédent).

L'utilisation de bibliothèques de scripts telles que jQuery ou mootools est sans doute intéressante mais j'ai peur de ne pas pouvoir facilement y intégrer mon code PHP. Ceci dit, j'ai vu quelques exemples d'effets intéressants et je vais peut-être creuser dans cette direction.

Encore merci

Cordialement
Jean

smo · Le 06/06/2012, à 01:12

hello ansuz !!

bah c'est cool ce petit projet pour te mettre au js je testerai des que possible sous ouindoz si tu veux que je taide a debugger...

je suis sur du js moi aussi en ce moment je dev un plugin de statistiques pour chrome

tres bien en tout cas bon courage pr la suite !!

++

AnsuzPeorth · Le 06/06/2012, à 12:15

nerim a écrit :

Le script est visible sur la page diaporama.php accessible à partir de la page galeries (lien vers le site dans mon message précédent).

Lors d un passage d'une image à l'autre, ca fait comme un petit "acoup", il faudrait peut être faire un fade_in et un fade_out, pour avoir une progressivité !

nerim a écrit :

L'utilisation de bibliothèques de scripts telles que jQuery ou mootools est sans doute intéressante mais j'ai peur de ne pas pouvoir facilement y intégrer mon code PHP. Ceci dit, j'ai vu quelques exemples d'effets intéressants et je vais peut-être creuser dans cette direction.

Ben non, y'a rien de particulier avec jquery et php, on sert une page html généré en php, on y mets ce que l'on veut ...

Une fois le script en place, ca serait peut être bien de le mettre en partage, ca pourrait servir

smo a écrit :

je testerai des que possible sous Windows si tu veux que je taide a debugger...

Si tu veux, mais entre nous, je m'en tape un peu de IE, surtout pour ce truc, c'etait surtout pour voir la POO en JS, donc bon ...

smo a écrit :

je suis sur du js moi aussi en ce moment je dev un plugin de statistiques pour chrome

Ah, les plugins chrome sont en JS ?! Intéressant ... Mais je préfére mon firefox qd même, qd chrome aura autant d'extensions que firefox, on verra pour changer (bien que d'être encore marié avec google, c'est pas vraiment agréable )
Et pis tu n'étais pas pro jquery ? Et tu te fais chier avec JS ... ?

bon courage pr la suite !!

Thx, toi aussi

nerim · Le 09/06/2012, à 00:06

Bonjour

AnzuzPeorth a écrit :

Lors d un passage d'une image à l'autre, ca fait comme un petit "acoup", il faudrait peut être faire un fade_in et un fade_out, pour avoir une progressivité !

Je pense qu'il doit s'agir d'un problème de temps de chargement des images puisqu'au 2ème passage (après un retour à la première image du cycle) l’a-coup disparait.

Je crois que je vais faire un "preload" de mes images

Cordialement
Jean

Ubuntu-fr

Navigation

Liens de recherche

Annonce

#1 Le 03/04/2012, à 17:05

[javascript] slideshow images et textes en pur javascript.

#2 Le 04/04/2012, à 15:17

Re : [javascript] slideshow images et textes en pur javascript.

#3 Le 04/04/2012, à 22:40

Re : [javascript] slideshow images et textes en pur javascript.

#4 Le 04/04/2012, à 23:57

Re : [javascript] slideshow images et textes en pur javascript.

#5 Le 05/04/2012, à 07:28

Re : [javascript] slideshow images et textes en pur javascript.

#6 Le 06/04/2012, à 14:34

Re : [javascript] slideshow images et textes en pur javascript.

#7 Le 07/04/2012, à 11:37

Re : [javascript] slideshow images et textes en pur javascript.

#8 Le 01/06/2012, à 13:00

Re : [javascript] slideshow images et textes en pur javascript.

#9 Le 02/06/2012, à 11:56

Re : [javascript] slideshow images et textes en pur javascript.

#10 Le 05/06/2012, à 12:18

Re : [javascript] slideshow images et textes en pur javascript.

#11 Le 06/06/2012, à 01:12

Re : [javascript] slideshow images et textes en pur javascript.

#12 Le 06/06/2012, à 12:15

Re : [javascript] slideshow images et textes en pur javascript.

#13 Le 09/06/2012, à 00:06

Re : [javascript] slideshow images et textes en pur javascript.

Pied de page des forums