12
MAI

BarackSlideshow - Un slideshow Mootools léger et efficace

Publié le 12/05/09 à 08h52 par DJo

BarackSlideshow est un Slideshow développé à partir du framework Javascript Mootools permettant de faire défiler automatiquement des images sur votre site.

BarackSlideshow - Un slideshow mootools léger et efficace

Très léger, il utilise un autre plugin Mootools développé par le même auteur: MorphList.

La classe est au rendez-vous avec ce script. Les transitions sont bien faites et les images sont chargées rapidement.

Il est bien sûr possible de choisir quel type de transitions vous souhaitez, si vous voulez que les images défilent automatiquement etc.

Pourquoi BarackSlideshow ? Tout simplement car l'auteur s'est inspiré d'un slideshow présent sur le site du président américain.

 

Intégration du slideshow:

Code HTML:

<div id="slideshow">    
  <span id="loading">Loading</span>
 
  <ul id="pictures">
    <li><img src="../Source/images/cities/melbourne.jpg" alt="Melbourne" title="Melbourne" /></li>
    <li><img src="../Source/images/cities/buenos_aires.jpg" alt="Buenos Aires" title="Buenos Aires" /></li>
    <li><img src="../Source/images/cities/urubamba.jpg" alt="Urubamba" title="Urubamba" /></li>
  </ul>
 
  <ul id="menu">
    <li><a href="../Source/images/cities/melbourne.jpg">Melbourne</a></li>
    <li><a href="../Source/images/cities/buenos_aires.jpg">Buenos Aires</a></li>
    <li><a href="../Source/images/cities/urubamba.jpg">Urubamba</a></li>
  </ul>
</div>

 

Code Javascript:

Vous ajoutez les librairies javascript requises, puis vous appelez le script comme ceci:

window.addEvent('domready', function(){
    new BarackSlideshow('menu', 'pictures', 'loading', {transition: 'slide-left', auto: true});
});

 

Démo

Site Officiel

Baraguiné par deudeu le 27/05/09 à 13h11
deudeu sur La Ferme du Web
C'est sympa mais j'aurais bien voulu l'utiliser un peu comme menu avec l'mage cliquable pour se rendre sur un article précis. Ce serait bien qu'il puisse faire cela comme nouvelle fonctionnalité.
Baraguiné par deudeu le 27/05/09 à 14h14
deudeu sur La Ferme du Web
Bon, je me suis renseigné auprès du gars qui a fait le script et je suis une andouille car c'est très simple de rendre cliquable les images sans ajout de javascript. Il faut tout simplement entourer chaque image d'une balise . Voilà j'ai l'air fin mais au moins j'espère que vous ne chercherez pas vous-même grâce à ma question idiote ! :-)
Baraguiné par Besty-party le 11/04/11 à 16h06
Besty-party sur La Ferme du Web
Bonjour,
Je voudrais modifier ce carrousel, pour qu'il soit automatique (diaporama).
J'ai bien compris qu'il fallait utiliser la deuxième partie de code (window.addEvent('domready', function(){......)

J'ai utilisé autostart:'true' dans la page "demo" ainsi qu'un autointerval, mais il ne se passe rien, pas même une erreur.

Comment faire pour l'automatiser, s'il vous plaît ?

Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web