Annonce ToutSurTout

Bienvenue sur toutsurtout.biz

Déjà 15 ans !

Radio TST

Si vous souhaitez participer vous aussi aux discussions sur le forum, il faut vous inscrire ou vous identifier.

Le Thème TST Automne est maintenant en place.

Les inscriptions sont actuellement OUVERTES.

Message 1 Discussion postée le 13-03-2013 à 05:06:48

Philippe
Avatar de Philippe


Titre: Banni
Avancement: Niveau 3
Date d'inscription: 26-09-2009
Messages: 3 660

Orbit - Un slider d'images jQuery très léger et propre

Orbit est un plugin jQuery permettant de créer un slideshow / slider d'images design et très léger.

Avec ses 2.8kb, Orbit est sans doute l'un des plus légers slider jQuery du moment, tout en restant fonctionnel et paramètrable.

Le slider passe en mode défilement automatique avec preload des images et affichage d'un cercle de chargement.

Il est possible de naviguer entre les slide en utilisant les flêches mettant en pause le diaporama automatique.

Il sera aussi possible d'afficher une légende en bas de l'image en renseignant la balise title de l'image.

Le code HTML est plutôt propre:

1.<div id="featured">
2.<img src="link.jpg" title="Link galliantly riding the majestic Epona across the hyrulian plains" alt="Link" />
3.<img src="ezio.jpg"  alt="Ezio" />
4.<img src="masterchief.jpg" title="Master Chief surveying Reach, home of his upcoming game"  alt="Master Chief" />
5.<img src="marcusfenix.jpg"  alt="Marcus Fenix" />
6.</div>

Et le code jQuery très simple à mettre en place, avec les différentes options:

01.$('#featured').orbit({         
02.animation: 'fade', //fade, horizontal-slide, vertical-slide
03.animationSpeed: 800, //how fast animations are
04.advanceSpeed: 4000, //if timer advance is enabled, time between transitions
05.startClockOnMouseOut: true, //if timer should restart on MouseOut
06.startClockOnMouseOutAfter: 3000, //how long after mouseout timer should start again
07.directionalNav: true, //manual advancing directional navs
08.captions: true, //if has a title, will be placed at bottom
09.captionAnimationSpeed: 800, //how quickly to animate in caption on load and between captioned and uncaptioned photos
10.timer: false //if the circular timer is wanted
11.});

Un nouveau slideshow jQuery qui fera certainement votre bonheur !

LIEN


https://www.world-lolo.com/images/uploads/image.num1445754529.of.world-lolo.com.jpg
Des stades aux entrées payantes sont pleins de gens qui pensent que ceux qu'ils applaudissent sont trop payés, et les bibliothèques à l'entrée gratuite sont vides des gens qui pensent que les livres sont trop chers ...