Babylon Design

par Samuel Le Morvan

Chez vous aussi, utilisez un Web de qualité

Rubrique Développement Web

Profitez des astuces en tous genres portant sur le développement en général !

Rubrique Développement Web

Un diaporama avec Script.aculo.us

Script.aculo.us est un site Internet proposant toute une librairie de fonctions permettant de créer des effets visuels impressionnants grace à la technologie Ajax et Ruby on Rails. Autrement dit, des effets sympa en ajoutant un petit bout de JavaScript à ses images ou ses blocs de texte. Fort de ces fioritures, j’en ai combiné quelques unes pour créer un diaporama de photos.

Pour vous donner une idée de ce que peut-être l’Ajax, je vous conseille de visiter le site Script.aculo.us, notamment la page des demos qui présente les effets visuels, les éléments classables (ici, , et par là) et les jauges (slider).

En utilisant cette librairie, notamment avec l’effet Scale et le Slider, j’ai réalisé ce petit diaporama qui peut-être plaisant à utiliser. Mais il est plus simple de voir par l’exemple.

Voir le diaporama avec Script.aculo.us

Si vous souhaitez l’utiliser il suffit de télécharger le fichier zip (1,3Mo).

Ce diaporama n’est pour l’instant qu’une ébauche car, pour être fonctionnel, il est limité en nombre de photos et en résolution d’écran. Je suis en train de préparer une deuxième version avec comme effets supplémentaires Shrink et Grow pour une implementation idéale.


Ce que nos lecteurs en disent :

  1. Julien

    j’ai réussi à tuer le diaporama :p

    j ai cliqué sur n’importe quelle photo, prenons la 6. le bouton bleu 6 de la barre va vers le milieu. j ai cliqué plusieurs fois à coté du bouton 6 sur la barre, ça a agrandi les photos d’en bas et au bout d’un moment je n’avais plus de photo, diaporama à recharger :D

  2. Shemu

    Félicitations ! :x
    Le diaporama comporte quelques bugs à cause de l’accumulation des effets.
    Je vais d’abord terminer la version 2 du diporama pour ensuite tenter de supprimer les bugs d’affichage des effets de script.aculo.us.

  3. xuxu

    Très réussi le diapo avec les effets.
    J’adore la photo avec la pyramide.

  4. Thanh

    Effectivement, c’est pas mal comme effet :)

  5. mivka

    tres sympa mais g un pronbleme sous IE qand je met d’autre image
    a la fin de la liste une vignette blanche apparait
    help me!

  6. heddi

    Le problème exprimé par Julien est un problème que je trouve récurente avec Script.aculo.us… A savoir que si on se déchaine et que le script n’a pas le temps de finir, tout devient perturber…

    En tout cas je garde un oeil sur ce diaporama

  7. awayo

    bonjour,
    comment trier les photos… Définir un ordre…
    Même si je mets 01, 02…
    Les photos s’affichent aléatoirement ??
    Merci,
    super script en tous cas…
    ;)

  8. rachon

    Je ne sais pas ou t’en est dans ton diaporama, mais je peux te proposer une version améliorée et débuggée…

    Si ca peux interesser qqn, ou puis-je te l’envoyer?

  9. Marie-Ange

    ton diaporama est d’une grande beauté et la visibilité est formidable, mais j’ai un sousci, je n’arrive pas à l’installer peux tu m’aider ?

    toutes mes falicitations
    Marie-Ange

Les commentaires sont clos.