service partner

Archives 15 janvier 2011

support
jobs

jQuery Cycle le slider à tout faire

Cycle est un plugin pour JQuery créé par Mike Alsup. Il est très facilement configurable et  permet de faire défiler des textes et images avec des effets de transition.

ce petit script d'a peine plus de 20ko :

  • permet de faire défiler des images et des textes:
  • avec de nombreux effet de transition (fondus, glissements, etc...)
  • en intégrant des elements de navigation.

L'installation basique est simple.

On précharge d'abord la bibliotèque Jquery (ici à partir de google)

on charge ensuite la librairie JQuery cycle

dans le corps de la page on place les images qu'on veut voir défiler dans une balise DIV :

  1. diaporama_simple">
  2.  
  3.  

on lance ensuite le script en le paramétrant avec l'ID du DIV contenant le diapora ma.

vous pouvez voir une démo Ici

Autres effets et navigation...

JQuery cycle propose de nombreux effets de transition dont on peu trouver la liste ici 

de plus script peut recevoir de nombreux paramètres, on peut ainsi ajouter des liens de navigation (précédent suivant, numero des diapos) à notre diaporama.

On modifie le code du diaporama ainsi

  1. diaporama_simple2">
  2.    
  3.    
  4.    
  5. navigation">
  6.  
    nav3">
  7. prev2" href="#">Précedent - next2" href="#">Suivant

on paramètre ensuite le script en lui indiquant des ID des liens de navigation.

  1.  

une demo de cet exemple est disponible ici

Faire défiler autre choses que des images

on peut aussi faire utiliser Jquery cycle pour présenter autre chose que des image, un exemple est disponible ici.

Toutes les ressources
Télécharger jquery Cycle
exemples et documentation (en anglais)
Les exemples de cet article

service

Comment éviter le bug z-index d’IE7

Oui je sais c'est pas un titre super sexy pour les non initiés, pardon...
Le point positif c'est que pour une fois je ne râle pas contre IE6

je vais t'expliquer mon problème :

J'ai une page web avec un menu déroulant en haut de page et un peu en dessous, un diaporama.
Quand on passe sur une des rubriques du menu déroulant, il se déplie devant le diaporama pour faire apparaitre les sous rubriques.

comme ceci.

le menu tel qu'il doit apparaitre...

et bien entendu sous IE7, il se déplie sous le diaporama

...Et tel qu'il apparait avec le bug Z-index d'IE7

comme cela

Après avoir maudit intérieurement les programeurs de Microsoft et leur descendance sur 15 générations (puissent les sauterelles dévorer leurs potagers) j'ai trouvé la solution à ce problème sur ce magnifique blog

il suffit en fait de rajouter au style de l'élément qui contient le menu une propriété Z-index avec une valeur Importante pour que l'element passe au dessus du diaporama...

note aussi au passage que seuls les element positionés peuvent avoir un Z-index.

Dans le cas qui m'interesse, le menu se trouve dans un élément ayant l'id "Header".
ce qui nous donne au niveau du code :

  1. #header
  2. {
  3. position: relative;
  4. z-index: 3000;
  5. }

et puis aprés ça fonctionne mieux sous IE7 ...
donc je suis moins en colère ...
Et dans ma grande mansuétude je lève ma malediction sur les programeurs de Microsoft (et sur leurs descendants)

Elle est pas belle la vie ?

suggest
Bear

Switch to our mobile site