Outils pour utilisateurs

Outils du site


cours2011:bases_de_la_programmation_orientee_objets_et_evenementielle:galerie_anime

Galerie animée

Le principe

En trois lignes :

  • Si l'on veut placer des éléments sur une grille de ”n” colonnes :
    • modulo ”n” donne le numéro de la colonne ( ”%” en JavaScript)
    • la division entière par ”n” donne le numéro de la ligne ( pas de division entière en JavaScript, on utilise ”Math.floor( index / n)” )

La base

Le but est d'obtenir ceci.

En partant de cela.

Dans un premier temps, ajouter les transitions pour les autres navigateurs : -moz- , -ms-, -o-, et sans préfixe !.

Les deux premières lignes sont triviales. Après, prendre exemple sur la façon (fonction ”init”) dont sont placés les éléments au départ.

Les “console.log(…)” doivent vous aidez comprendre ce qui ce passe :

Améliorations

  • Ajouter une variante avec ”:hover” aux effets trouvant les images des piles (pour une indication visuelle de l'interactivité).
    • Changer aussi le curseur ne serait pas superflu. (À défaut d'utiliser des liens pour les interactions.)
  • Changer l'opacité sur le UL des piles d'images et non sur chaque LI. (Dans les CSS).
  • Faire replier la pile quand on quitte le ”#contenu” et pas nécessairement en cliquant sur une image de la pile.
$('#contenu').on("mouseleave", function (){ 
  /* attention vous  ne pouvez pas ici utiliser this pour trouver l'élément ul "actif" */ 
});
  • Faire que l'on puisse le faire aussi par un clic sur ”#contenu” est à peine plus compliqué (“clic nouseleave”). Vous aurez besoin de ”event.stopPropagation();” pour que le clic ne soit pas traité deux fois.
  • Utiliser des transformations CSS et non ”top” et ”left” pour placer les éléments.
  • Pour pouvoir modifier séparément les positions des LI. Il sera plus simple de placer les effets actuels (bord, ombre, rotation) directement sur les images. Dans un premier temps, simplement les supprimer.
  • Le code peut être le suivant :
      $(this).find('li').css({
        "-webkit-transform":"translate("+
           ((index % NBR_COL) * LARGEUR)+"px,"+
           (Math.floor(index / NBR_COL) * HAUTEUR)+"px)"
      });
cours2011/bases_de_la_programmation_orientee_objets_et_evenementielle/galerie_anime.txt · Dernière modification: 2012/04/02 22:00 (modification externe)