Je reviens de nouveau avec un plugin jQuery. Cette fois, c’est une réalisation française : Chocolat. Chocolat permet de visualiser une à plusieurs images sans quitter la page de votre site web. Le plugin jQuery laisse à l’utilisateur le choix de regrouper une série d’image sous un lien, ou de laisser apparaître les images sous forme de miniatures. Cette visionneuse peut apparaitre soit en pleine page, soit dans un bloc de la page.

Utilisation du plugin :

Appel des librairies et fichiers js / css :

Création des éléments html qui seront touchés par le plugin :

Puis la mise en marche du plugin :

Puis vous aurez tous vos liens qui seront affectés par le plugin jQuery Chocolat, au clic vous pourrez visionner vos images sans avoir à changer de page.

Il existe plusieurs options :

Pour plus d’information sur ce plugin, rendez vous sur la page officiel de Chocolat
Pour visualiser une démo, c’est par là

Articles qui peuvent vous intéresser :

• Chocolat – plugin jQuery – La visionneuse d’image pratique
• s3Slider – Plugin jQuery – Un slider simple pour vos sites web
• jCoverflip – Plugin jQuery – Le Coverflow simple et efficace
• GMap3 – Plugin jQuery pour API Google Maps 3ème version
• jQuery AutoSuggest Plugin – Boite de texte avec suggestions Ajax

Vous cherchez un slider en javascript ? Mieux, en jQuery ? De plus, couplé à un menu accordéon avec du contenu afin de rendre l’utile à l’agréable ? Slidorion est le plugin qu’il vous faut. En effet, vous allez pouvoir faire défiler des images (avec textes, html etc… ou non) avec un menu associé et son bloc de contenu. Autant dire que ce plugin jQuery est intéressant pour agrémenter un page web.

Comment utiliser ce plugin jQuery :

Importer les librairies dans le document (dans le « head » – css+js) :

Vous l’aurez compris, easing est nécessaire au bon fonctionnement de Slidorion.
Télécharger Easing

Construire la structure qui deviendra notre Slider à menu :

Et l’initiation basique du plugin :

Bien entendu, il existe de multiples options, comme la vitesse de changement, des effets tels que les fondus, les intervalles etc…

Vous pouvez directement télécharger le plugin Slidorion.

Vous avez des démonstrations complètes sur le site du plugin jQuery Slidorion.

Un bon petit plugin jQuery bien pratique.

Et vous qu’en pensez vous ?

Articles qui peuvent vous intéresser :

• s3Slider – Plugin jQuery – Un slider simple pour vos sites web
• jCoverflip – Plugin jQuery – Le Coverflow simple et efficace
• GMap3 – Plugin jQuery pour API Google Maps 3ème version
• jQuery AutoSuggest Plugin – Boite de texte avec suggestions Ajax
• jQuery Slick Plugin – Agrémentez vos sites d’onglets rétractables

Un petit article sur un plugin jQuery très simple, qui permet de mettre en place un slider pour vos sites web.

Vous le savez certainement, le site du Framework javascript jQuery et plus particulièrement la partie des plugins a été victime d’une malheureuse erreur de manipulation, faisant ainsi perdre une grande partie des plugins enregistrés sur le site de jQuery et ce, sur plusieurs mois (voir années). Ne vous étonnez donc pas si vous tombez sur un message de maintenance en vous rendant sur la partie plugins du site de jQuery. Tout ça pour vous dire qu’il est intéressant pour moi (et c’est le cas de pas mal d’acteurs du web) de vous dégoter des plugins jQuery et de vous les présenter, et ainsi d’avoir plusieurs sources disponibles pour ces derniers.

Bon, revenons en à notre plugin du jour, à savoir s3Slider, qui comme son nom l’indique est un slider. Un slider qui agrémentera vos sites web.

Pour moi, le meilleur des sliders à l’heure actuel reste Skitter, mais certains d’entre vous auront peut être besoin de quelque chose de beaucoup plus basique et s3Slider peut répondre à ce besoin.

Voilà la manière de l’utiliser :

Code à insérer dans le head de votre fichier.

Ensuite :

Les blocs qui deviendront un slider. Images + textes.

Puis :

Le code css d’exemple à modifier comme bon vous semble.

Et pour finir :

Et l’appel à la méthode du plugin afin de transformer tous ces jolis petit blocs en un slider simple (avec pour cet exemple, un changement d’image toutes les 4 secondes).

Retrouver le plugin sur cette page web

Pour visualiser les démonstrations.

Articles qui peuvent vous intéresser :

• jCoverflip – Plugin jQuery – Le Coverflow simple et efficace
• GMap3 – Plugin jQuery pour API Google Maps 3ème version
• jQuery AutoSuggest Plugin – Boite de texte avec suggestions Ajax
• jQuery Slick Plugin – Agrémentez vos sites d’onglets rétractables
• jQuery Favicon Notifier – Plugin jQuery – Modifiez vos favicons à la volée via jQuery

Je reviens avec un article sur un plugin jQuery qui va vous permettre de réaliser un ou plusieurs Coverflow de manière simple et efficace. Je dis simple si vous possédez des notions de jQuery, bien entendu. Ce plugin, c’est jCoverflip, qui utilise le framework javascript jQuery (normal) et jQuery UI (disponible ici).

Voici un exemple basique de l’utilisation de ce plugin jQuery :

Appel des librairies utiles au bon déroulement des opérations

L’élément avec l’ID #flip se verra touché par l’effet de jCoverflip.

On s’aperçoit que l’élément avec l’ID #flip est une liste « ul » avec lien, image et titre. Pour le titre, il est possible d’utiliser l’attribut « alt » de l’image ou bien d’utiliser un attribut title dans le « li ».

Et là votre Coverflow est fonctionnel.

Bien entendu, il y a de multiples options et variantes, options disponibles sur cette page.

A savoir qu’une version pour Drupal existe.

Retrouver le plugin téléchargeable sur ce lien et une démonstration ici.

Par contre on s’aperçoit que le plugin jCoverflip est utilisé avec une version 1.3 de jQuery, à l’heure où j’écris ces lignes nous en sommes à la 1.7, donc à tester sous cette dernière version.

Bon code à tous !

EDIT DU 02.01.2012 :
Le plugin ne fonctionne pas forcément avec une version récente de jQuery, pour cela, on peut retrouver une version plus fraiche de ce plugin faite par l’auteur et qui devrait fonctionner : https://github.com/NewSignature/jcoverflip

Articles qui peuvent vous intéresser :

• GMap3 – Plugin jQuery pour API Google Maps 3ème version
• jQuery AutoSuggest Plugin – Boite de texte avec suggestions Ajax
• jQuery Slick Plugin – Agrémentez vos sites d’onglets rétractables
• jQuery Favicon Notifier – Plugin jQuery – Modifiez vos favicons à la volée via jQuery
• jQuery – Validation – Plugin de validation de formulaire

Je vais vous reparler du Plugin GMAP3 pour jQuery, qui permet une utilisation simplifiée et en jQuery de l’API Google Maps Javascript Version 3. C’est un plugin que j’ai déjà présenté 2 fois sur ce blog, ici et là. A l’heure où j’écris ces quelques lignes la version 4.1 de ce plugin est sortie et disponible directement sur le site du plugin GMAP3 ici.

Pour rappel, GMAP3 c’est quoi ?

GMAP3 c’est un plugin jQuery qui va vous permettre de nombreuses manipulations de l’API Google Maps JavaScript version 3.

Utilisation du plugin jQuery :

Dans un premier temps inclure toutes les librairies nécessaires dans le head de votre fichier comme ceci :

Pour l’exemple on va utiliser le plugin dans sa version la plus basique :

Ensuite un peu de CSS pour le bloc qui aura l’ID maCarte et qui est la cible de notre exemple :

Puis pour finir notre bloc avec l’ID maCarte :

Et là vous devriez voir apparaitre un élément Google Maps dans votre div représentant le monde, et en toute logique centré sur le pays où vous vous trouvez.

Quelques particularités apportées par ce plugin parmi beaucoup d’autres :

- Multi-instance (plusieurs cartes Google dans une même page web)
- Chaînable (comme tout autre plugin JQuery)
- Full JQuery
- Full Google Maps (il permet d’utiliser toutes les fonctionnalités natives à l’API Google Maps 3)
- Contextuel (via this qui se réfère au bloc qui reçoit la map)
- etc…

Je vous laisse donc découvrir le site officiel du Plugin jQuery GMAP3 et une version Française (non-officiel) sur cette page.

Vous retrouverez toutes les informations et possibilités sur ces 2 sites.

Bon code à tous

Articles qui peuvent vous intéresser :

• jQuery AutoSuggest Plugin – Boite de texte avec suggestions Ajax
• jQuery Slick Plugin – Agrémentez vos sites d’onglets rétractables
• jQuery Favicon Notifier – Plugin jQuery – Modifiez vos favicons à la volée via jQuery
• jQuery – Validation – Plugin de validation de formulaire
• jQuery – Compatibilité – Utiliser jQuery avec un autre Framework javascript

Me voici de retour avec la présentation d’un autre plugin jQuery qui vous permettra d’offrir aux internautes qui visitent vos sites internet la possibilité d’avoir une liste de suggestion lors des entrées qu’ils commenceront à formuler dans vos boites de texte de formulaires. Un peu dans le même esprit que le célèbre moteur de recherche du géant Google.

Je vous présente donc jQuery AutoSuggest Plugin, qui permet la création de suggestion de mots comme une liste de choix dans vos boites de texte avec des appels Ajax.

Ce plugin jQuery d’auto-suggestion permet entre-autre :

– D’afficher toutes les données JSON sous une liste
– D’utiliser les flèches haut / bas pour faire défiler la liste
– D’utiliser « entrer » ou la « tabulation » pour sélectionner une valeur de la liste
– D’afficher une image de chargement (loading)
– De stocker l’ID de la valeur sélectionnée dans un champ distinct
– D’avoir des boîtes à suggestions multiples sur une seule page
– D’avoir un appel Ajax selon le nombre de caractères entrés, afin d’abaisser le nombre d’appels à la page Ajax

Des exemples PHP et ASP sont inclus dans le téléchargement de la démo.

L’utilisation se fait comme suis :

Là, on a demandé que l’auto-suggestion se fasse sur l’élément de formulaire avec l’ID inputBox1 et les suggestions seront établies depuis le fichier php/ajax.php.

C’est tout ce qu’il y a à faire pour la version simple. Voici toutes les options possibles :

N’hésitez pas à télécharger le plugin jQuery et le tester, via ce lien
Retrouvez la démo ici.

Si vous avez des commentaires ou questions n’hésitez pas

Articles qui peuvent vous intéresser :

• jQuery Slick Plugin – Agrémentez vos sites d’onglets rétractables
• jQuery Favicon Notifier – Plugin jQuery – Modifiez vos favicons à la volée via jQuery
• jQuery – Validation – Plugin de validation de formulaire
• jQuery – Compatibilité – Utiliser jQuery avec un autre Framework javascript
• Facebox – Plugin jQuery – Des lightbox style Facebook

Toujours dans un but de poster des petites astuces et de répondre aux questions de mes collègues, amis ou clients, voici un petit billet pour vous expliquer quelques pratiques pour forcer le cache navigateur à re-télécharger certains éléments de votre site qui ont changé, mais qui restent en cache navigateur, car le nom du fichier, lui, est toujours le même.

En effet, le navigateur garde en mémoire certains éléments (css, images, javascript etc…) afin d’améliorer la vitesse de chargement. Mais il arrive que de petites modifications ne soient pas prises en compte ce qui peut perturber l’affichage et/ou la navigation des internautes sur votre site. Bien entendu, en tant que développeur, vous savez qu’il faut vider le cache navigateur, mais certains visiteurs (et surtout vos clients) ne le savent pas forcément. Alors, il existe quelques astuces pour essayer de palier à ce soucis.

Renommer les fichiers

Bien entendu, il vous est possible de renommer tous les fichiers qui ont été modifiés, mais ça peut s’avérer fastidieux, surtout si vous apportez souvent de petites modifications.

Utilisation des requêtes via le ?

Déjà plus pratique, il vous est possible d’utiliser lors de l’appel du ou des fichiers une requête « factice » après le point interrogation « ? ».

Comme ceci par exemple :

Et donc modifier juste l’appel à chaque modification, « 1234″ deviendra « 12345″ etc…

Si vous utilisez PHP, nous pouvons améliorer ce petit procédé et le rendre automatique, exemple simple :

Ce qui le modifiera à chaque fois et le navigateur le téléchargera à chaque fois.

Cependant, il est possible d’améliorer cela, éviter ainsi le téléchargement systématique du fichier, et faire en sorte que ce dernier ne soit téléchargé uniquement si le fichier à été modifié, exemple :

Petite astuce simple à mettre en place et qui peut s’avérer utile dans certains cas

Bon code à tous !

Articles qui peuvent vous intéresser :

• Google – Mais où est passé mon PageRank (PR) ?
• PHP – Créer une variable depuis une variable
• Internet Explorer 9 – PHP – Problèmes avec mon site depuis IE9
• Facebox – Plugin jQuery – Des lightbox style Facebook
• jQuery – QRCode – Générez vos propres QRCodes

Vous souhaitez réaliser un effet d’onglet rétractable sur votre site internet ? Vous souhaitez un bloc de contact qui se dévoile lorsque vous cliquez sur un onglet « Contact » calé sur le bord de votre page de site web ? Vous avez vu ça quelque part, mais ne trouvez pas le plugin jQuery adéquat ? jQuery Slick Plugin est là pour vous permettre de réaliser cet effet.

Un plugin jQuery téléchargeable via ce lien, et à utiliser ainsi :

Élément HTML :

Appel de la librairie :

Intégration du css (il existe un style proposé par l’auteur, mais il est possible de proposer son propre style css) :

Et exploitation du plugin :

Bien entendu, il existe des options, voici celles par défaut :

Puis la manière de les utiliser :

Un plugin jQuery qui peut s’avérer pratique dans de nombreux cas. Plusieurs autres versions spécifiques existent : WordPress Slick Menu Plugin, WordPress Slick Contact Form Plugin et Slick Social Share Buttons.

Et vous qu’en pensez vous ?

Articles qui peuvent vous intéresser :

• jQuery Favicon Notifier – Plugin jQuery – Modifiez vos favicons à la volée via jQuery
• jQuery – Validation – Plugin de validation de formulaire
• jQuery – Compatibilité – Utiliser jQuery avec un autre Framework javascript
• Facebox – Plugin jQuery – Des lightbox style Facebook
• jQuery – QRCode – Générez vos propres QRCodes

Après un petit temps d’absence je reviens avec un petit billet sur un plugin jQuery que j’ai trouvé assez amusant, et je dois avouer que je n’avais jamais vraiment pensé à cela. En effet, via jQuery Favicon Notifier, vous allez pouvoir changer l’aspect de vos favicons de sites à la volée, sans recharger la page, et vous allez même pouvoir y ajouter des nombres et chiffres accolés, idéal pour ajouter un petit gadget indiquant un nombre de messages non lus par exemple. Bon, petit bémol, ça n’a pas l’air de fonctionner sous IE. Mais ça a le mérite d’exister et j’aime bien les petites idées comme ça

Par contre, peu de documentation, mais comme le suggère l’auteur, il suffit de regarder le code source, ça parle tout seul, pour peu qu’on ai des notions javascript

On peut donc voir l’intégration des librairies :

et le fonctionnement des boutons :

Pour découvrir le plugin jQuery Favicon Notifier, ça se passe par là : http://oodavid.com/jQueryFaviconNotifier

Articles qui peuvent vous intéresser :

• jQuery – Validation – Plugin de validation de formulaire
• jQuery – Compatibilité – Utiliser jQuery avec un autre Framework javascript
• Facebox – Plugin jQuery – Des lightbox style Facebook
• jQuery – QRCode – Générez vos propres QRCodes
• Passage de jQuery 1.5.x vers jQuery 1.6

On a toujours besoin de vérifier et faire valider nos formulaires pour nos sites internet. Alors aujourd’hui, je vous présente un plugin jQuery qui va vous permettre de procéder plus facilement à la première couche de filtre coté client pour vos formulaires (une couche qui n’empêche pas de devoir en ajouter une coté serveur hein ! )

Rendez-vous donc sur github pour télécharger le plugin et vous pouvez visionner les démo ici si vous le souhaitez.

Alors comment fonctionne ce plugin de validation de formulaire pour jQuery :

1/ Intégration de la librairie jQuery et du plugin :

On peut voir que l’on intègre un fichier js de langue, pour le Français, il suffit d’appeler le fichier fr à la place, comme ceci :

2/ Imaginons une structure de formulaire comme ceci :

3/ nous allons donc activer la validation sur le formulaire comme ceci :

4/ Il suffira de mettre les conditions de validation dans les attributs « class » de vos balises input, ce qui peut donner ceci :

Et voilà, vous avez votre formulaire équipé d’un filtre de validation via jQuery. Cet exemple, permet d’obliger l’internaute à entrer une adresse e-mail requise et valide, une date requise et valide, ainsi que du texte requis et composé essentiellement de lettre et de chiffres.

Toutes les options sont disponibles sur la documentation du plugin, disponible ici.

Source

Bon code à tous !

Articles qui peuvent vous intéresser :

• jQuery – Compatibilité – Utiliser jQuery avec un autre Framework javascript
• Facebox – Plugin jQuery – Des lightbox style Facebook
• jQuery – QRCode – Générez vos propres QRCodes
• Passage de jQuery 1.5.x vers jQuery 1.6
• Web Event #3 de Lyon – Retour