On peut utiliser ces scrolls pour des sliders horizontaux et verticaux.

Son implémentation se déroule de la manière suivante :

1/ Dans votre header

<script type="text/javascript" src="inc/jquery/1.3.2.min.js"></script>
<script type="text/javascript" src="inc/mbScrollable.js"></script>

2/ Appel au script JS

      $("#myScroll").mbScrollable({
        width:700,
        elementsInPage:1,
        elementMargin:2,
        shadow:"#999 2px 2px 2px",
        height:"auto",
        controls:"#controls",
        slideTimer:600,
        autoscroll:true,
        scrollTimer:4000
      });

3/ Construction

  <div id="myScroll">
    <div class="scrollEl" style="background-color:#9999ff">1</div>
    <div class="scrollEl" style="background-color:#cc9900">2</div>
    <div class="scrollEl" style="background-color:#660066">3</div>
    <div class="scrollEl" style="background-color:#009966">4</div>
    <div class="scrollEl" style="background-color:#6600ff">5</div>
    <div class="scrollEl" style="background-color:#9999ff">6</div>
    <div class="scrollEl" style="background-color:#33cc00">7</div>
    <div class="scrollEl" style="background-color:#cc00cc">8</div>
    <div class="scrollEl" style="background-color:#009999">9</div>
  </div>
  <div id="controls">
    <div class="first">first</div><div class="prev">prev</div>
    <div class="next">next</div><div class="last">last</div>
    <div class="pageIndex"></div>
    <div class="start">start</div><div class="stop">stop</div>
  </div>

Démo : http://pupunzi.com/#mb.components/mb.scrollable/scrollable.html

Site du plugin : http://plugins.jquery.com/project/mbscrollable

Site officiel : http://pupunzi.open-lab.com/mb-jquery-components/mb-scrollable/

Disponibles dans différents formats, vous pouvez partir de la sélection d’un motif ou d’une couleur pour consulter les “fonds” qui s’en rapprochent.

Site officiel : http://patterns.ava7.com

A l’invers de certain de ses “concurrents” le défilement est lisse. Il est bien entendu entièrement paramétrable.

Smooth Scroll

L’implémentation reste simple :

Site officiel : http://www.smoothdivscroll.com

Adresse du projet JQuery : http://plugins.jquery.com/project/SmoothDivScroll

C’est pratique et cela permet de mettre rapidement en place un faux contenu pour avoir une meilleure idée de l’ergonomie que l’on va proposer.

Mais un contenu est aussi constitué de médias comme des images ou des vidéos.

Concernant les images, nous avons l’équivalent du Lorem Ipsum : le Lorempixum.

Pour l’utiliser, il vous suffit de faire pointer l’url de votre source image vers le site .

Cette adresse peut prendre 3 paramètres :

1. la largeur
2. la hauteur
3. le thème de l’image (tag)
4. le numéro de l’image (entre 1 et 10)

http://lorempixum.com/largeur/hauteur/tag/numéro

Voici un exemple :  http://lorempixum.com/400/200/sports/1

Ce qui donnerait l’implémentation suivante : <img src=”http://lorempixum.com/400/200/sports/1” alt=”monImage” />

Si vous ne mettez pas de numéro d’image alors le choix se fera aléatoirement ente les 10 images disponibles dans le thème.

Et si vous ne choisissez aucun thème, vous récupèrerez alors des images aléatoirement à travers les 11 thématiques actuellement disponibles.

Site officiel : http://lorempixum.com

Cette initiative s’inscrit dans un projet global visant à vous mettre à disposition un ensemble d’outils pour vous accompagner au quotidien dans vos métiers. Nous travaillons sur le développement des premiers services le composant depuis quelques mois.

Une première version béta sera publiée en début d’été prochain.

Ainsi, pour faire partie des premiers utilisateurs, nous vous invitons à vous y inscrire sans plus tarder !

http://www.operness.com

Aucune licence gratuite n’est donc proposé pour l’utilisation de ce plugin Jquery. La licence basic vous coûtera 49 € et vous permettra l’utilisation de 500 images maximum.

Dans son utilisation, Ajax-zoom est un explorateur de fichier, un diaporama, un outil pour zoomer agrémenté d’un tableau de bord intuitif.

Page plugin Jquery : http://plugins.jquery.com/project/ajax-image-zoom

Site officiel : http://www.ajax-zoom.com

Différents paramètres sont diponibles à la configuration :

- défilement automatique

- fonction de callback

A noter que les sources des images (balises img avec ses paramètres) peuvent être chargés en Json.

Site officiel : http://www.outcut.de/MooFlow/MooFlow.html

Ce programme vous permet de construire plusieurs dictionnaires.

D’autre part, un moteur d’apprentissage expoite les données et génère dynamiquement (et aléatoirement) des Quizz pour vous donner la possibilité d’améliorer vos niveaux de connaissances.

A titre d’exemple, PREDICO propose à l’installation, un début de dictionnaire PHP. Bien entendu, vous pouvez parfaitement concevoir des dictionnaires de langue.

Enfin, il est possible d’importer / exporter des dictionnaires pour les sauvegarder ou pour les échanger entre utilisateurs.

PREDICO prévoit différents améliorations :

• intégration à des sites web
• des api

Démonstration en ligne : http://www.developpeurs-web.com/predico/

Site officiel : http://www.atomestudio.com

La différence qu’il propose comparativement à d’autres services du même type, est de permettre à l’utilisateur de manipuler l’image en haute définition très facilement. En effet, il est possible sur l’image insérée dans une page  de zoomer à l’aide de la souris ou en utilisant les boutons positionnés en bas de l’image. Tout cela se fait avec une grande fluidité.

Une fois l’image uploadée sur le site de Zoom.it, celui-ci fourni le code à insérer sur sa page web.

Autre point intéressant, il est possible depuis son url, d’obtenir une capture d’écran d’un site comme le montre cet exemple.

Lien officiel : http://zoom.it

Il est bien entendu recommandéavant de l’utiliser / adopter, de découvrir son code source à fin de comprendre  l’ensemble de ce qu’il propose (et de quelle manière). Il peut donc également servir de base et d’inspiration.

Les caractéristiques (en Anglais) sont :

Site officiel : http://html5boilerplate.com