-
0Lire la suite de LightSlider : html5 JQuery Slider
Voilà un petit slider construit avec html5 et JQuery. Très sobre et très simple, ce slider se veut léger. Le plugin en version compressé pèse un poil plus d’1ko.
Pour ce plugin j’ai utilisé les balises <figure> et <figcaption> proposés par html5. Les images de votre slider devront être dans une div conteneur, et chacune devra être ajouter de la manière suivante :
<figure>
<img src="img/1.jpg" alt=""/>
<figcaption>Couché de soleil</figcaption>
</figure>La balise figure est un conteneur, regroupant l’image()<img> et sa légende(<figcaption>).
Coté javascript/JQuery, c’est très simple. On positionne les images les unes au dessus des autres avec JQuery. De cette manière, si javascript est désactivé, on aura un affichage correct (enfin, un affichage qui me convient, en tant que développeur... :) )
Si la div contenu à l’id #slideMe, on appelle le plugin de la manière suivante :
$(document).ready(function(){
$('#slideMe').lightSlider();
});On a juste deux options sur ce plugin :
- texteBoutonPrec : Le texte du lien pour passer à l’image précédente
- texteBoutonSuiv : Le texte du lien pour passer à l’image suivante
Pour les impatients, voilà la démo : http://www.demo.creamama.fr/lightSlider/
Pour les plus intéressés, il reste encore quelques lignes ci-dessous :
Je me suis intéressé au début de cette semaine à html5 history. Après avoir lu pas mal d’articles, de docs et en avoir compris une partie, je voulais essayer de le mettre en pratique. Ce slider est là pour ça. Il servira de base pour une démo à venir. Mais tant qu’à faire d’avoir développé ce petit slider, autant le partager :)
Ces derniers temps, on a vu passait pas mal de slider avec des effets assez impressionnants (par exemple : chopSlider), mais du coup, beaucoup plus gourmand en ressource. L’idée de se slider, c’est de re rester sobre, simple et ultra léger.
N’hésitez pas à le télécharger, le modifier, vous l’approprier, ou donner votre avis !
-
- Démo lightSlider
-
- script lightslider compressé
-
- script light slider
24
Aout -
1Lire la suite de JQuery captcha : Drag and Drop
Un captcha en JQuery où il faut glisser / déposer une image pour valider le formulaire. Vous connaissez tous le principe du captcha. Ce petit test présent à la fin de nombreux formulaires, qui empêchera les robots de spammer vos formulaires.
Ils prennent souvent la forme de quelques mots ou suite de chiffres, plus ou moins lisible. Dans les différents exemples ci-dessous même pour un humain, il n’est pas toujours facile de le déchiffrer.
AJAX FANCY CAPTCHA propose une alternative intéressante. Pour valider le formulaire, vous devrez glisser / déposer l’objet demandé dans l’encart prévu à cet effet. Simple d’installation et d’utilisation, il nécessite ui.core.js, ui.draggable.js et ui.droppable.js.
Ce n’est certainement pas la solution la plus accessible, la moins lourde à mettre en place ou encore la plus sécurisée, mais elle a le mérite de proposer une alternative. Avec un peu plus d’imagination et de recherche, on doit pouvoir arriver à une solution convenable.
Je vous laisse découvrir ça par vous même : AJAX FANCY CAPTCHA
19
Aout -
0Lire la suite de Carte de france SVG
Restons dans le domaine de la cartographie, avec aujourd’hui une carte des départements de France. Dans le dernier article, je vous présentais une carte du monde en JQuery / svg.
Cette fois-ci, pas de JQuery, du pur Javascript, cette carte utilise la librairie raphaël. Je ne connaissais pas du tout avant de voir cette démo. Pour en faire une brève présentation, elle facilite le travaille sur des données vectorielles. Elle est compatible avec la plupart des navigateurs, même les plus vieux (Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+).
J’ai l’impression que cette démo, reste une démo, et pas un plugin avec tout plein d’options.
On trouve le code suivant dans le fichier script.js :
var current = null;
for (var state in fr) {
fr[state].color = "#0493AB";
(function (st, state) {
st[0].style.cursor = "pointer";
st[0].onmouseover = function () {
current && fr[current].animate({fill: "#f5f5f5", stroke: "#d5d5d5"}, 300);
st.animate({fill: st.color, stroke: "#d5d5d5"}, 300);
//st.toFront();
paper.safari();
//document.getElementById(state).style.display = "block";
//current = state;
};
st[0].onmouseout = function () {
st.animate({fill: "#f5f5f5", stroke: "#d5d5d5"}, 300);
//st.toFront();
paper.safari();
};
})(fr[state], state);
}Il semble donc relativement facile de modifier le comportement au survol, au clic.
16
Aout -
Lire la suite de JVectorMap : Plugin JQuery carte vectorielle
Un plugin JQuery pour afficher une carte du monde au format vectorielle.
Pas mal d’options sont disponibles, pour gérer par exemple, le survol ou le clic d’un pays.
Avec des données supplémentaires, il est facile d’enrichir la carte. Dans la démo du site, on voit l’intégratin des données du FMI.
Le résultat pour une carte du monde est plutôt honnête, mais il peut manquer dans certains cas, des données plus précises concernant par exemple les départements, régions, villes, etc. Heureusement, deux cartes plus précises sont fournies, pour les US, et pour l’Allemagne.
Coté technique, on a un script pour les données de la carte, un autre script pour générer la carte, et un fichier de style pour rendre le tout un peu plus agréable. Ce plugin utilise SVG pour les navigateurs "modernes" (Firefox 3 or 4, Safari, Chrome, Opera, IE9). On appréciera quand même le support des versions 6 à 8 d’Internet Explorer grâce à VML
source : http://jvectormap.owl-hollow.net/#data_visualization_with_jvectormap
12
Aout -
1Lire la suite de JQuery ChopSlider
Des sliders JQuery, il en existe un paquet. Y en des jolis, y en des moches, bref, pour tous les goûts.
Et ce matin, je tombe sur ÇA :
Franchement, le développeur qui a développé ce slider, c’est sorti les doigts (J’espère juste qu’il s’est lavé les mains :). Il y a une trentaine d’effets de transition différents, certains sont plus gourmand en ressources que d’autres. C’est à la limite ce qu’on pourrait reprocher au plugin, mais on en prend plein la vue.
Ce slider utilise les transitions css3, on a un joli paquet d’options. Il est par exemple possible de déterminer des transitions particulières pour les navigateurs ne supportant pas css3, ou pour les supports mobiles.
source : http://www.idangero.us/cs/
11
Aout
A Propos
Je suis un concepteur et développeur web à Grenoble. Je développe essentiellement avec le CMS Spip. Actuellement en contrat chez Territorial, je continue ma veille technologique, et vous fais partager ce que je trouve utile et pratique.
