Informations
N'hésitez pas à nous rejoindre, plus on est de fous plus on jQuery !
Abonnement
Participer
Membres
Voilà une bonne semaine que la version 2.0 du célèbre Framework javascript jQuery est sortie. Voici une partie des nouveautés concernant cette version :
- Fin de la prise en charge de IE 6/7/8 (cependant les version 1.x de jQuery seront toujours supportées)
- Une taille de librairie réduite. En effet, environ 12% plus légère que la version 1.9.1 (surtout avec le fait de ne plus prendre en charge certaines versions de navigateurs)
- Personnalisation des builds et réduction de leur taille, ainsi qu’une simplification d’utilisation
- Appels d’API compatibles avec jQuery 1.9 (cf. http://jquery.com/upgrade-guide/1.9)
Comme je l’ai dit, pas de panique, on a le temps de s’habituer à cette nouvelle version, car les version 1.x sont toujours soutenues. Par contre, commencez dès à présent à migrer vos développements vers la 2.0, du moins, avant la fin du support des versions antérieures (même si ce n’est pas d’actualité) 
Pour en savoir plus sur cette version 2.0 de jQuery, rendez vous sur le billet du blog jQuery traitant de cette actualité.
Site officiel jQuery : jquery.com
Articles qui peuvent vous intéresser :
- GMAP3 – Plugin jQuery – Facilitez-vous l’intégration de Google Maps
- Growl – Plugin jQuery – La SimpleBox
- quickSearch – Plugin jQuery – La recherche facile dans vos listings
- carouFredSel – Plugin jQuery – Le carrousel customisable
- Tiny Circleslider – Plugin jQuery – Le slider en cercle original
scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">
Il y avait quelques temps déjà que je devais vous faire un nouvel article sur le plugin jQuery GMAP3, plugin qui facilite grandement l’intégration de Google Maps sur vos sites web et le tout via le Framework jQuery.
Je vous avais déjà présenté ce plugin jQuery sur d’autres articles du blog, comme sur GMap3 – Plugin jQuery pour API Google Maps 3ème version. Mais GMAP3 a évolué et s’est vu doter d’un nouveau site web depuis.
Certes, Google facilite déjà beaucoup l’intégration de son API sur les sites web, mais via GMAP3 c’est encore plus simple et surtout avec jQuery.
En plus de pouvoir utiliser toutes les méthodes natives à l’API fournie par Google, GMAP3 va vous permettre, entre autre, de :
- Customiser vos maps
- Créer vos menus contextuels
- D’ajouter des recherches d’adresses avec auto-completion
- Créer vos marqueurs sur les maps
- Afficher le streetview de manière différente
- etc…
Le tout aisément, sans compter les méthodes comme : overlays, clusters, callbacks, events etc… présentes dans de nombreux plugins jQuery.
L’utilisation de base de ce plugin jQuery :
Intégration des librairies qui vont être utilisées (jQuery, googlemaps et gmap3)
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false&language=en">
<script type="text/javascript" src="js/gmap3.min.js"></script>
Le code jQuery pour l’affichage d’une map Google Maps :
La balise div d’accueil de la map :
Puis un peu de CSS minimum pour donner une dimension à la balise div d’accueil :
height: 350px;
width: 600px;
}
Vous l’aurez compris, c’est simple, vous avez une page de démo via ce lien afin de voir une partie de ce que l’on peut faire avec ce plugin jQuery.
Site officiel du plugin jQuery GMAP3 : http://gmap3.net
Documentation GMAP3
Téléchargement GMAP3
Articles qui peuvent vous intéresser :
- Growl – Plugin jQuery – La SimpleBox
- quickSearch – Plugin jQuery – La recherche facile dans vos listings
- carouFredSel – Plugin jQuery – Le carrousel customisable
- Tiny Circleslider – Plugin jQuery – Le slider en cercle original
- jNotify – Plugin jQuery – La notification à portée de clic
scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">
Growl est un plugin jQuery extrêmement simple qui peut, peut-être, vous être utile pour un petit effet de box d’information sur votre site internet.
Avec Growl, vous allez pouvoir créer des petites box qui attireront l’œil de l’internaute le moment souhaité.
Vous pouvez voir et télécharger le plugin jQuery Growl depuis ce lien
Et voir une démo par ici
Voici l’utilisation (simple) d’usage de ce plugin :
//settings
"icon": false,
"title": false,
"cls": "",
"speed": 500,
"timeout": 3000
});
Il suffit de regarder le code source du fichier “index” fourni par le créateur pour comprendre l’utilisation aisée de ce petit plugin jQuery.
Bon code à tous
Articles qui peuvent vous intéresser :
- quickSearch – Plugin jQuery – La recherche facile dans vos listings
- carouFredSel – Plugin jQuery – Le carrousel customisable
- Tiny Circleslider – Plugin jQuery – Le slider en cercle original
- jNotify – Plugin jQuery – La notification à portée de clic
- DropDown Menu – Plugin jQuery – Menu déroulant simple et efficace
scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">
Après un long silence, je reviens avec de nouveaux articles pour 2013 !
Aujourd’hui, je vous fait découvrir (ou redécouvrir) un plugin jQuery qui va vous permettre de créer un petit moteur de recherche rapide pour vos listings sous forme de tableaux (balise table) ou de listes à puce (balise ul>li).
En effet, parfois, nous avons de longues listes de contenu où un moteur de recherche en javascript serai le bienvenue pour augmenter l’accessibilité et le coté pratique de vos pages web.
Ce plugin jQuery, c’est quickSearch, et il s’utilise de la manière suivante :
Admettons que nous avons une table sous cette forme :
<thead>
<tr>
<th>Email</th>
<th>Id</th>
<th>Phone</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<th>devo@flexomat.com</th>
<td>66672</td>
<td>941-964-8535</td>
<td>14/12/1988</td>
</tr>
<tr>
<th>henry@mountdev.net</th>
<td>35889</td>
<td>941-964-9543</td>
<td>19/1/1974</td>
</tr>
<tr>
<th>found@mountdev.net</th>
<td>03519</td>
<td>941-964-1599</td>
<td>6/8/2000</td>
</tr>
[...]
</table>
Il vous faut ajouter un champ de formulaire pour les entrées de recherches, comme suit :
<input type="text" name="search" id="id_search" />
</form>
Puis initier le plugin jQuery, comme ceci dans sa version de base :
De là, une recherche se fera directement sur votre listing et seuls les champs avec le contenu de la recherche apparaitront.
Il y a de nombreuses options, afin d’optimiser ou de configurer la recherche, comme activer la recherche sur une ou plusieurs colonnes spécifiques, préciser les sélecteurs, ajouter des délais etc…
Pour télécharger le plugin jQuery quickSearch et avoir plus d’informations cliquez sur ce lien
Pour voir des exemples et démonstrations cliquez sur celui-ci
J’en profite aussi pour vous souhaiter une bonne année à tous ! 
Articles qui peuvent vous intéresser :
- carouFredSel – Plugin jQuery – Le carrousel customisable
- Tiny Circleslider – Plugin jQuery – Le slider en cercle original
- jNotify – Plugin jQuery – La notification à portée de clic
- DropDown Menu – Plugin jQuery – Menu déroulant simple et efficace
- Flux Slider – Plugin jQuery – La transition d’image à effets multiples
scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">
Je reviens avec un plugin jQuery permettant de réaliser un carrousel de manière efficace, rapide et adapté au besoin. En effet, carouFredSel est un plugin jQuery qui va vous permettre tout cela.
Voici sa mise en place basique :
1- Appel des librairies qui vont être utilisées soit : jQuery et le plugin lui même :
<script type="text/javascript" src="jquery.carouFredSel.js"></script>
2- Les images (si vous souhaitez utiliser des images) qui intégreront le carrousel. Mais vous pouvez y mettre du texte, une liste à puce ou tout autre élément html :
<img src="img1.jpg" width="300" />
<img src="img2.jpg" width="300" />
<img src="img3.jpg" width="300" />
<img src="img4.jpg" width="300" />
<img src="img5.jpg" width="300" />
<img src="img6.jpg" width="300" />
<img src="img7.jpg" width="300" />
<img src="img8.jpg" width="300" />
</div>
3- Lancement du plugin et votre carrousel devient effectif !!
// Using default configuration
$("#foo").carouFredSel();
});
C’est simple, surtout si vous avez quelques notions d’utilisation du framework javascript jQuery (jquery.com).
Bien entendu, il existe de multiples options et moyens de customisation (voir la configuration).
Pour utiliser ce plugin jQuery, voici le lien direct vers le site carouFredSel : http://caroufredsel.dev7studios.com et le lien vers le téléchargement : http://dev7studios.com/downloads/60
Démo : http://caroufredsel.dev7studios.com/examples/basic-carousels.php
Articles qui peuvent vous intéresser :
- Tiny Circleslider – Plugin jQuery – Le slider en cercle original
- jNotify – Plugin jQuery – La notification à portée de clic
- DropDown Menu – Plugin jQuery – Menu déroulant simple et efficace
- Flux Slider – Plugin jQuery – La transition d’image à effets multiples
- 50 Plugins jQuery pour vos sites web !
scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">
Voici un billet sur le blog qui sera mis à jour régulièrement et où je répertorie tous les plugins jQuery que l’on trouve sur le blog. C’est donc, une liste bien complète avec pour l’instant plus de 50 plugins jQuery.
Les incontournables
jQuery UI
Traitements de textes
quickSearch
jQuery Validation
Select Text Searcher
MarkItUp !
jqIsoText
Effets
Growl
carouFredSel
jNotify
Facebox
jQuery Slick Plugin
DropDown Menu
jPages
msdropdown
SuperFish
Image Cube
jQuery Approach
(mb)Extruder
Pajinate
jQuery Pagination plugin
jQuery Masonry
TipTip
Quicksand
ClueTip
Images
Tiny CirleSlider
Flux Slider
Zoombox
jQuery Favicon Notifier
jCoverflip
s3Slider
Chocolat
Glisse
Skitter
Easy Image Zoom
Zoomy
Cycle
Sponsor Flip Wall
Easy Gallery
ColorBox
MaxImage
JLoupe
JQuery Infinite Carousel
AnythingSlider
YoxView
jqFancyTransitions
CropZoom
Réseaux communautaires / Outils API / Jeux
jQuery AutoSuggest Plugin
pp3Diso
jTwitter
jQuery QRCode
GMap
gComplete
jSocial
API / Utiles
GMAP 3 (dernier article en date sur GMAP3)
GMAP 3
PlupLoad
FullCalendar
Vous pouvez vous abonner à cette page, je commenterai à chaque fois que je la mettrai à jour.
Pour tout ce qui est des plugins jQuery vous pouvez suivre des articles en Français issues de plusieurs blogs de développeurs via le site planete-jquery.fr
Bon code à tous
Aujourd’hui pour la présentation d’un autre plugin jQuery, je vous fais découvrir Tiny Circleslider, un plugin jQuery plutôt original et qui change des sliders beaucoup plus classiques que l’on commence à voir fleurir sur la toile (ce qui est une bonne chose d’ailleurs). Mais avec Tiny Circleslider, vous allez pouvoir proposer à vos visiteurs, un défilement d’images dans un cercle et de manière fluide et agréable.
Afin de vous faire une idée, voici le lien vers le site, d’où vous pourrez admirer plusieurs démonstrations.
Ce plugin jQuery peut être paramétré avec diverses options et il fonctionne sur Iphone, Android et Ipad.
Pour l’utiliser, voici la méthode :
L’appel javascript avec jQuery :
Et les balises qui seront impactées par le plugin jQuery :
<div class="viewport">
<ul class="overview">
<li><img src="images/SF1.jpg" alt="" /></li>
<li><img src="images/SF2.jpg" alt="" /></li>
<li><img src="images/SF3.jpg" alt="" /></li>
<li><img src="images/SF4.jpg" alt="" /></li>
<li><img src="images/SF5.jpg" alt="" /></li>
<li><img src="images/SF6.jpg" alt="" /></li>
<li><img src="images/SF7.jpg" alt="" /></li>
<li><img src="images/SF8.jpg" alt="" /></li>
<li><img src="images/SF9.jpg" alt="" /></li>
<li><img src="images/SF10.jpg" alt="" /></li>
<li><img src="images/SF11.jpg" alt="" /></li>
<li><img src="images/SF12.jpg" alt="" /></li>
<li><img src="images/SF13.jpg" alt="" /></li>
<li><img src="images/SF14.jpg" /></li>
<li><img src="images/SF15.jpg" /></li>
</ul>
</div>
<div class="overlay"></div>
<div class="thumb"></div>
</div>
Et vous aurez votre effet de slider version cercle.
Retrouvez le plugin jQuery Tiny Circleslider
Et vous, que pensez vous de cet effet ?
Articles qui peuvent vous intéresser :
- jNotify – Plugin jQuery – La notification à portée de clic
- DropDown Menu – Plugin jQuery – Menu déroulant simple et efficace
- Flux Slider – Plugin jQuery – La transition d’image à effets multiples
- 50 Plugins jQuery pour vos sites web !
- pp3Diso – Plugin jQuery – l’affichage et la gestion d’une carte 2D isométrique
scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">
Aujourd’hui, un plugin jQuery qui se veut simple, mais pratique. En effet, vous avez toujours besoin sur vos sites internet dynamiques de notifier des éléments à vos utilisateurs. Par exemple, “Enregistrement effectué“, “Image correctement téléchargée” ou même “Désolé, cette action est impossible“.
Pour se faire on utilise des boites de dialogue qui annoncent ce genre de message. jNotify, va vous permettre de faire ça très simplement et rapidement, avec diverses options comme le délais d’affichage, une action de fermeture etc…
Vous pouvez vous procurer le plugin via ce lien (.zip) et l’utiliser ainsi :
Appel des librairies
<link type="text/css" href="css/jquery.jnotify.css" rel="stylesheet" media="all" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jnotify.js"></script>
Puis l’utiliser ainsi :
Bien entendu, y mettre dans une action de clic ou autre pour faire apparaitre la notification.
Par exemple :
$.jnotify("hello World");
});
Quand vous cliquerez sur l’élément avec l’id #notify, vous allez avoir une notification par défaut disant : “Hello World”.
Évidemment, il existe plusieurs options et syntaxes, que l’on peut utiliser ainsi :
$.jnotify(message, delay);
$.jnotify(message, sticky);
$.jnotify(message, type, [delay/sticky]);
Pour toutes les options et plus d’exemples, je vous laisse vous rendre sur le site du plugin : http://www.givainc.com/labs/jnotify_jquery_plugin.htm
Articles qui peuvent vous intéresser :
- DropDown Menu – Plugin jQuery – Menu déroulant simple et efficace
- Flux Slider – Plugin jQuery – La transition d’image à effets multiples
- 50 Plugins jQuery pour vos sites web !
- pp3Diso – Plugin jQuery – l’affichage et la gestion d’une carte 2D isométrique
- jPages – Plugin jQuery – Pagination à effet pour vos sites web
scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">
Flux slider est un plugin jQuery très inspiré du plugin jQuery Nivo Slider et qui va vous permettre des transitions d’images poussées notamment avec des effets 3D, mais surtout avec une grande fluidité apportée par l’utilisation des transitions CSS3 associées à ce plugin.
Actuellement le plugin Flux Slider fonctionne sur :
– Safari
– Chrome
– iOS
– Blackberry Playbook
– Firefox 4
– Opera 11
Bien entendu le plugin n’est viable que sur les navigateurs supportant le CSS3 (soit tous les navigateurs récents).
Exemple d’utilisation simple :
<img src="img/avatar.jpg" alt="" />
<img src="img/ironman.jpg" alt="" title="Ironman Screenshot" />
<a href=""><img src="img/imagewithlink.jpg" alt="" /></a>
<img src="img/tron.jpg" alt="" />
</div>
Ci-dessus les éléments html qui s’exécuteront avec des transitions.
puis l’instanciation de Flux Slider :
window.myFlux = $('#slider').flux();
});
Bien entendu, il existe de nombreuses options qu’il est possible de découvrir sur le Github du plugin jQuery Flux Slider
Vous pouvez admirer la démo du plugin via ce lien
Et télécharger le plugin en cliquant sur ce lien là
A savoir qu’une version plugin WordPress existe aussi.
Articles qui peuvent vous intéresser :
- Zoombox – Plugin jQuery – Zoomez sur vos images
- 50 Plugins jQuery pour vos sites web !
- pp3Diso – Plugin jQuery – l’affichage et la gestion d’une carte 2D isométrique
- jPages – Plugin jQuery – Pagination à effet pour vos sites web
- DropDown Menu – Plugin jQuery – Menu déroulant simple et efficace
scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">
Ce n’est pas parce qu’on a déjà fait le tour de 50 plugins jQuery qu’il faut s’arrêter là, non ?
Aujourd’hui je vous présente une nouvelle création française en jQuery, c’est Zoombox. Un plugin jQuery qui va vous permettre de réaliser des effets lightbox sur vos images, photos, contenus, médias etc… sur vos sites web.
Ce que l’on peut faire avec zoombox :
- permet d’intégrer dans les effets : Images, animations Flash, videos Youtube, videos Dailymotion, Iframe, contenu HTML
- le rendu est aisément customisable via le css
- il est possible de grouper les galeries
- il est possible de naviguer dans les galeries via les flèches du clavier et de fermer la box via le bouton esc
- etc…
Utilisation de Zoombox :
Intégration des librairies js, jquery et zoombox :
Appel de la feuille de style css :
Lancement du plugin (appel de base) :
jQuery(function($){
$('a.zoombox').zoombox();
});
</script>
Puis les éléments html qui seront visés par le plugin :
<a href="http://www.ludikreation.com" class="zoombox">Site ludiKreation</a>
/* You can group links into 'galleries' with the keyword zgallery{galleryname} */
<a href="Firstlink" class="zoombox zgallery1">Link</a>
<a href="SecondLink" class="zoombox zgallery1">Link</a>
<a href="ThirdLink" class="zoombox zgallery1">Link</a>
<a href="Fourthlink" class="zoombox zgallery1">Link</a>
/* You can also specify a with and a height */
<a href="VideoLink" class="zoombox w500 h400"/>
3 versions différentes dans cet exemple :
- Un lien de base
- Une galerie
- Et une vidéo
Il existe plusieurs options pour customiser et modifier l’affichage :
theme : 'zoombox', //available themes : zoombox,lightbox, prettyphoto, darkprettyphoto, simple
opacity : 0.8, // Black overlay opacity
duration : 800, // Animation duration
animation : true, // Do we have to animate the box ?
width : 600, // Default width
height : 400, // Default height
gallery : true, // Allow gallery thumb view
autoplay : false // Autoplay for video
});
En fait, l’auteur a réalisé une vidéo pour la mise en place du plugin. Pratique et sympa, non ?
Je vous la partage
Présentation Zoombox V2 par Grafikart
Site du plugin
Télécharger le plugin
Documentation
Articles qui peuvent vous intéresser :
- 50 Plugins jQuery pour vos sites web !
- pp3Diso – Plugin jQuery – l’affichage et la gestion d’une carte 2D isométrique
- jPages – Plugin jQuery – Pagination à effet pour vos sites web
- DropDown Menu – Plugin jQuery – Menu déroulant simple et efficace
- Glisse – Plugin jQuery – Faites défiler vos images
scrolling="no" frameborder="0"
style="border:none; width:540px; height:50px">
