Je reviens de nouveau avec jQuery, cette fois-ci avec un plugin nommé « Selected text searcher« . C’est un plugin qui va permettre de rajouter une sorte de tooltip lors de la sélection d’un texte que vous aurez préalablement déterminé.

En fait, vous allez pouvoir y mettre des liens dans la tooltip, des liens avec favicon du site si vous le souhaitez. Vous pourrez y mettre un titre, du contenu et des éléments de recherche ou d’envoi.
Par exemple pour ajouter des éléments de partage :
code js :
et le html :
On peut remarquer l’attribut favicon, pour ajouter automatiquement le favicon du site en question.
Pour effectuer des recherches sur un lieu, via googlemaps ou wikipédia par exemple :
code js :
code html :
Pour plus d’informations :
Le site du plugin
La démo
Articles qui peuvent vous intéresser :
scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">

En me baladant sur le net, je suis tombé sur un petit article sur le blog de Victor Coulon, qui explique d’une manière simple une petite astuce en jQuery sur comment camoufler son adresse mail aux yeux des robots spammeurs, mais pas à ceux des internautes.
Voici donc l’astuce :
Le code jQuery nécessaire :
Et l’affichage HTML :
Articles qui peuvent vous intéresser :
scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">
jQuery est un framework agréable et très apprécié des développeurs, notamment grâce à une fluidité et une maniabilité améliorée de coder en javascript. Et je suis tombé sur un tutoriel vraiment bluffant sur les possibilités données via jQuery et l’imagination de développeurs.
Avec Sponsor Flip Wall, vous allez pouvoir réaliser un mur de sponsors, ou autre, avec comme effet, qu’au clique la cellule d’image du sponsor sélectionné se retourne pour dévoiler des informations et un lien. Bien entendu tout ceci peut être adapté et l’effet, que l’on retrouve souvent dans des animations flash, est plutôt fluide et très agréable.

Avec un peu de code PHP, CSS et javascript on peut arriver à ce résultat.
Un fichier css style.css :
Un fichier php demo.php avec :
Et du javascript dans un fichier script.js :
Bien entendu tout le code ici n’est pas complet, pour télécharger le code complet, rendez vous ici.
Démonstration
Source et tutoriel
Articles qui peuvent vous intéresser :
scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">
Il y avait bien longtemps que je ne vous avait pas parlé de mon framework javascript préféré : jQuery. Cette fois c’est pour vous parler d’un petit plugin sympathique pour agrémenter vos sites avec un défilement d’images.
Ce plugin, c’est Easy Gallery.

Le code que vous pouvez visualiser sur la démonstration, est le suivant :
Et le html de vos images :
Ça reste donc assez ludique et compréhensible, pour un rendu agréable.
Articles qui peuvent vous intéresser :
scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">
Me revoilà avec un nouveau Plugin jQuery, je vous avais déjà présenté un plugin qui proposait de la pagination pour vos sites web. Et bien en voilà un autre légèrement différent. C’est Pajinate !

Vous allez donc pouvoir raccourcir vos listes et proposer un système de page, au lieu de tourner la roulette de votre souris pour atteindre le bout de la liste qui vous parait interminable.
Exemple d’intégration :
Puis les blocs ciblés :
Le plugin se charge du reste, c’est assez simple à mettre en place et peut s’avérer utile.
Vous pouvez retrouver une démo ici.
Puis les sources là.
Et le site du projet : http://th3silverlining.com/2010/04/15/pajination-a-jquery-pagination-plugin/
Articles qui peuvent vous intéresser :
scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">
Voici plusieurs mois que je vous fais des articles dédiés au web, et dans ces articles, très souvent on en revient à parler de jQuery. Déjà parce que j’aime ce Framework Javascript et puis parce que c’est l’un des plus utilisé sur le web. Je tâche de vous faire découvrir de nouvelles utilisations et des plugins de ce framework javascript.
Dans ce billet, je vous ai regroupé 20 plugins jQuery qui sont à tester ou voir au moins une fois. Une sorte de résumé des articles que je vous ai déjà fait sur le sujet.
Les indispensables

jQuery UI
Je vous en parle ici.
Un officiel de l’équipe jQuery qui va vous permettre entre autre, de créer des éléments type : Draggable, Droppable, Resizable, Selectable, Sortable, Accordion, Datepicker, Dialog, Progressbar, Slider, Tabs etc… le site
—————————————————————————
Traitements de textes

MarkItUp !
Je vous en parle ici
MArkItUp est un éditeur de texte qui fonctionne avec jQuery. Léger, simple et pratique, il va vous permettre d’intégrer un éditeur de textes à votre site, aussi bien de xhtml, bbcode, wikicode etc… le site

jqIsoText
Je vous en parle ici
C’est un plugin qui va permettre de faire un effet pseudo-isométrique sur un texte. Le site
—————————————————————————
Effets

jQuery Pagination plugin
Je vous en parle ici
Un effet de pagination en javascript utilisant la librairie jQuery. Le site

jQuery Masonry
Je vous en parle ici
Plugin qui agence les blocs de div de vos site automatiquement. Le site

TipTip
Je vous en parle ici
Un tooltip simple et léger pour votre site web. Le site

Quicksand
Je vous en parle ici
Un plugin jQuery qui va vous permettre d’agrémenter vos tries ou filtrages d’éléments avec des animations fluides et assez originales. Le site

ClueTip
Je vous en parle ici
Un ToolTip évolué et configurable. Le site
—————————————————————————
Images

ColorBox
Je vous en parle ici
Certainement l’une des meilleures lighbox en jQuery à mes yeux. Le site

maxImage
Je vous en parle ici
Un plugin qui permet de redimensionner des images ciblées avec une largeur max selon le navigateur utilisé, leur ratio, et quelques caractéristiques simples. Le site

JLoupe
Je vous en parle ici
Création d’un effet de loupe sur les images. Le site

JQuery Infinite Carousel
Je vous en parle ici
Un effet de Carrousel pour vos images en jQuery. Le site

AnythingSlider
Je vous en parle ici
Un slideShow pour vos images en jQuery. Complet et configurable. Le site

YoxView
Je vous en parle ici
Une lightbox améliorée. Le site

jqFancyTransitions
Je vous en parle ici
Un slide show avec des transitions d’images originales. Le site

CropZoom
Je vous en parle ici
Plugin impressionnant de manipulation d’image, utilisant jQuery UI. Le site
—————————————————————————
Réseaux communautaires / Outils API

jTwitter
Je vous en parle ici
Un plugin JQuery qui va vous permettre de récupérer facilement des informations issues de Twitter. Ce plugin va chercher les informations grâce à l’API fournie par Twitter et au format json, puis les récupère afin que vous les traitiez. Le site

gMap
Je vous en parle ici
Améliore et facilite l’utilisation de l’API google map, en utilisant jQuery. Le site

gComplete
Je vous en parle ici
Un plugin qui va vous permettre d’utiliser la complétion de l’API Google avec jQuery et en quelques lignes. Le site

jSocial
Je vous en parle ici
Un plugin jQuery simple et adapté pour avoir les icônes et les liens vers les sites de réseaux sociaux en un clin d’œil sur son blog ou site. Le site
—————————————————————————
Bonus

jQuery 1.4 API Cheat Sheet
Je vous en parle ici
Un tour complet en un coup d’œil de l’API jQuery 1.4. Le site
Laissez moi des petits commentaires si ça vous a été utile (ou pas)
Un petit billet pour vous présenter un plugin jQuery : jqIsoText. C’est un plugin qui va permettre de faire un effet pseudo-isométrique sur un texte. J’avoue que je ne vous présente pas le plugin le plus utile qui soit, d’ailleurs je n’en trouve pas encore l’utilité, mais il a le mérite d’exister et peut être qu’il vous servira.

Il a aussi l’avantage d’être très simple d’utilisation.
Pour obtenir le résultat par défaut :
![]()
voici le code :
vous l’aurez compris, il faut dans ce cas assigner la classe css « default » au texte cible.
Pour un résultat type vague :
![]()
voici le code :
Et pour un résultat inversé :

voici le code :
Si vous voulez en découvrir plus sur ce plugin, c’est par là : http://workshop.rs/projects/jqisotext/
Articles qui peuvent vous intéresser :
Pour ce billet, je vais vous présenter un plugin jQuery (une fois n’est pas coutume), et peut être vous aider à trouver un plugin qui répond à vos besoins.

Ce plugin se nomme YoxView (j’aime bien le logo) et est une version améliorée de la lightbox 2. Cela reste toujours un visionneur d’images avec effets, mais avec quelques différences qui le fera peut être préférer à d’autres.

Présentation :
- Il possède des plugins (un plugin avec des plugins, oui) pour le lier avec picasa ou flickr
- L’image cliquée s’agrandit avec un effet fluide.
- Les vidéos sont supportées
- Les images sont chargées en arrière plan
- Totalement configurable
- Création de groupe d’images
- Des boutons dans plusieurs langues différentes
- Un effet slideshow automatique
- Valide sur la majorité des navigateurs
- etc…
Pour découvrir YoxView c’est par là : http://www.yoxigen.com/yoxview/Default.aspx
Articles qui peuvent vous intéresser :
Me revoilà avec la présentation d’un autre plugin jQuery. J’ai trouvé l’effet peu commun et assez agréable à voir. Je vous fait découvrir Quicksand un plugin jQuery qui va vous permettre d’agrémenter vos tries ou filtrages d’éléments avec des animations fluides et assez originales.

Par exemple, pour une utilisation simple, vous allez procéder ainsi :
Pour le js
pour le html
Ce qui va remplacer une collection d’éléments par une autre.
A savoir que l’attribut data-id est valide html5, il existe d’autres méthodes si vous utilisez un autre doctype.
Je vous laisse découvrir les exemples, qui vous donnent une idée de toutes les utilisations possibles et vous renvois vers la documentation pour en apprendre d’avantage sur ce plugin jQuery.
Comme toujours, si vous avez des questions, n’hésitez pas à les laisser à la suite de ce billet
Me revoilà avec une découverte jQuery, un autre plugin lié à la manipulation d’images. Cette fois, un slide show avec des transitions d’images originales, j’ai beaucoup apprécié les effets.

Vous allez pouvoir avoir sur votre site une galerie d’images avec diverses transitions.
L’utilisation s’effectue ainsi :
On va chercher nos librairies jquery + jqFancyTransitions
On crée notre bloc, qui contiendra notre galerie d’images
Entre les balises head, on insère le javascript qui réalisera le slideshow avec nos éléments
Et le tour est joué !
A savoir qu’il y a plusieurs options disponibles :
Et depuis la version 1.7, vous pouvez ajouter des urls aux images :
Pour plus d’informations et pour une démo : le site du plugin jqFancyTransitions
Bon code