ColorBox est un plugin jQuery qui permet de générer une lightbox légère et totalement personnalisable pour accueillir photos, textes ou vidéos. Avec plus de quarante options disponibles, ColorBox s’inscrit dans la lignée des meilleurs générateurs de « pop-in ». Facile à utiliser, c’est aussi un des plugins jQuery les plus utilisés sur Internet.

Un plugin léger et complet

Au même titre que Fancybox, ColorBox est un plugin de qualité. Le script est particulièrement léger, à peine 10KB, et supporte tous les types de contenu possibles : photo, galerie d’images, vidéo, flash, contenu chargé en AJAX, simple texte, ou encore iframe. Une feuille de style et pas moins de quarante options sont disponibles pour vous permettre de personnaliser au mieux votre lightbox. Côté compatibilité, difficile de faire mieux : tous les navigateurs supportent le plugin, IE6 compris.

Parmi la multitude d’options, vous retrouverez le type de transition (« fade », « elastic » ou « none »), la vitesse d’animation, l’insertion d’une légende, les boutons de navigation, le degré d’opacité du background, les dimensions de la lightbox, l’activation du diaporama, ou encore la navigation au clavier. Du côté des méthodes, quelques fonctions de callback et de points d’ancrage événementiels sont également présentes. Bref, ColorBox est plus que complet !

Facile à mettre en place

ColorBox est très simple à utiliser. On commence par déclarer la structure HTML qui nous intéresse, par exemple une liste de liens qui pointent chacun sur une image. Ainsi, lorsqu’on cliquera sur un lien, l’image qui lui est associée s’ouvrira dans une lightbox.

<ul>
  <li><a class="lightbox" rel="gallery" href="../content/ohoopee1.jpg" title="Me and my grandfather on the Ohoopee.">Grouped Photo 1</a></li>
  <li><a class="lightbox" rel="gallery" href="../content/ohoopee2.jpg" title="On the Ohoopee as a child">Grouped Photo 2</a></li>
  <li><a class="lightbox" rel="gallery" href="../content/ohoopee3.jpg" title="On the Ohoopee as an adult">Grouped Photo 3</a></li>
</ul>

Une fois la structure prête, on déclare jQuery et le plugin (script et feuille de style) dans notre document. On peut alors faire appel à la fonction colorbox(). Dans cet exemple, on sélectionne tous liens disposant de l’attribut « rel » pour générer une lightbox contenant une galerie d’images. Ainsi, nous pourrons basculer d’une image à l’autre tout en restant dans la même lightbox.

$('a.lightbox').colorbox({rel:'gallery'});

Il existe de nombreux plugins jQuery qui proposent de la génération de lightbox. ColorBox est de loin (avec FancyBox) le plugin le plus abouti dans ce domaine avec un script léger, facile à prendre en main et qui possède une grande variété de paramètres pour mettre en place des lightbox personnalisées et compatibles sur tous les navigateurs.

Requis : jQuery
Compatibilité : Firefox, Chrome, Internet Explorer 6+, Opera 11+, Safari
Démonstration : http://jacklmoore.com/colorbox/
Licence : MIT

Salut à tous, désolé, je publie tard aujourd’hui parce que je suis en vacances et que j’ai décidé de toucher le moins possible mon pc. Pour être honnête, j’ai rédigé ce billet depuis mon lit sur mon téléphone en rentrant d’un repas au resto En même temps, pas de grand mérite, il y a presque rien à dire cette semaine.

Je commence donc avec l’annonce de disponibilité de jQuery Mobile 1.0.1. Rien de violent dans cette version mineure comme vous vous en doutez. Bien que… l’ajout du support de Bada n’est pas rien et ouvre toujours plus la capacité de jQuery Mobile a devenir un vrai standard. Dans le lien, vous trouverez un changelog complet qui contient notamment la liste des choses corrigées et améliorées.

D’ailleurs en parlant des choses corrigées, il faut un bugtracker. Et bien en ce moment l’officiel de jQuery est littéralement harcelé par les spammers. Ce qui fait qu’il est devenu difficile de soumettre quelque chose. Il faut donc avoir un compte et avoir la chance que votre IP ou carrément votre FAI ne soit pas déjà banni pour flood. En espérant que la situation se calme aussi tôt que possible sinon ça va vite devenir gênant.

Continuons avec une astuce pour les utilisateurs de Symfony 2 permettant d’utiliser le datepicker de jQuery UI par défaut plutôt que celui présent dans le framework php.

Je termine sur un gros projet qui vient de voir le jour et qui nous est offert par Jarodxxx. Un site entièrement dédié à la documentation en français de jQuery. Rien que ça. Merci à lui pour son très gros travail. Pour info, il est en train de finaliser la mise à jour de la doc vers la dernière version.

Bon bah voilà, c’est tout pour cette semaine !

Vous connaissez surement déjà la documentation française de jquery qui était jusque là hébergée sur le même nom de domaine que ce blog (jquery.jarodxxx.com)

Et bien je viens de faire acquisition de jquery-fr.com et désormais vous retrouverez la documentation ( en phase de mise à jour)  avec son nouveau design TOTALEMENT épurée sur ce nouveau domaine.

L’occasion peut-être de faire un backlink vers ce nouveau domaine, ou de mettre à jour vos généreux lien

Notez qu’un redirection 301 assure le relais de vos pages en favoris

Salut à tous, j’espère que vous passez un bon nouvel an chinois ! Pas grand chose à se mettre sous la dent, ceci dit, on tape dans le qualitatif pour ce qu’il y a à dire.

Je commencerai par vous reparler de jQuery UI Bootstrap. Le framework de dev, basé sur Twitter Bootstrap pour le design et sur jQuery UI pour le côté JS. Il est actuellement disponible en version 0.2. Merci à Addy Osmani pour son énorme travail à ce sujet.

Autre « mise à jour », Mirko Tebaldi a mis à jour sa version PDF de la doc de jQuery. Vous pouvez la récupérer ici.

Sinon, côté plugins, il y en a deux qui m’ont botté cette semaine.

Le premier, chez les copains de BowJay qui continuent sur la lancée avec un plugin de slideshow assez sympa.

L’autre, je l’ai découvert via LaFermeDuWeb. Chosen vous permet de styliser vos listes de sélection (et ça a de la gueule).

Un fasicule de type « cheat sheet » a été publié par l‘équipe de Woorkup concernant jQuery 1.7.

Pour finir, un nouveau livre a rejoint la grande bibliothèque de jQuery. Editions Eyrolles, un tome intitulé JQuery Mobile : La bibliothèque JavaScript pour le Web mobile. Il est plutôt épais, puisqu’il compte un peu plus de 600 pages. Si j’ai l’occasion de le lire, je vous en ferais une critique bien entendu.

Voilà, c’est tout pour cette semaine !

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

La périodicité du blog est devenue irrégulomadaire à tendance bimensuelle… Malgré tout, je tiens à partager avec vous les fruits de la veille. Dans le panier : des trucs sympas et pratiques pour WordPress ; un plugin pour splitter du contenu avec jQuery ; des formulaires HTML plus efficaces ; une astuce toute simple pour connaitre personnellement vos visiteurs via Google Analytics, quelques liens pour compresser et organiser vos CSS et tout un tas d’autres choses dont l’énumération serait longue et fastidieuse.

Liens WordPress

WordPress Theme Generator

WP Generator Blog est assez bluffant : votre thème pour WordPress est plié en quelques clics, sans connaissance préalable en HTML, JS, PHP ou même CSS ! Changez les couleurs, le nombre de colonnes, etc. L’outil produit des thèmes compatibles à partir de WordPress 2.1 jusqu’à la version 2.7 au moins, et embarque le framework Yahoo! UI.

Affichez votre nombre de followers Twitter sur votre blog

Il n’y a pas que le compteur Google Feedburner pour gonfler notre égo virtuel. Le nombre de followers que l’on peut avoir sur son compte Twitter peut à lui seul vous gonfler un égo capable d’atteindre la blogosphère stratosphère ^__^ Le code fourni par wpRecipes est composée d’une partie à copier dans le fichier functions.php de votre blog et d’une autre partie à placer là où vous désirez afficher l’information.

Random « Read More »

Ces deux bouts de code dégottés sur wpguy affichent un lien « lire la suite » aléatoire pour chacun de vos articles. Le premier est à placer avant The Loop :

 
<?php 
    $more_strings = array( 
        "Read More...", 
        "Keep on Reading...", 
        "Wait! There's more...", 
        "Read the rest of the article..."
    );
?> 
<?php 
    the_content($more_strings[rand(0,count($more_strings))]); 
?> 

Liens intégration web

Organisation, compression, vos CSS vont adorer !

• cleancss — Cet outil en version française très complet propose quatre niveaux de compression et permet de personnaliser les paramètres en précisant un gabarit de formatage pour votre feuille de style, dont voici un exemple de compression maximale,
• Styleneat — Trie (ou pas) les sélecteurs ou les déclarations dans l’ordre alphabétique. Affiche les déclarations sur plusieurs lignes. Possibilité de coller la feuille de style, de saisir l’URL de la CSS ou enfin de l’uploader depuis votre poste de travail. Via roget.biz,
• dustmeselectors — Extension pour Firefox qui traque les sélecteurs CSS inutilisés dans votre page web,
• Em Calculator — Pratique pour obtenir des valeurs en em pour les éléments de votre document HTML à partir d’une taille exprimée en px,
• Construct Your CSS — Construct est un éditeur visuel basé sur Blueprint et jQuery. Ce projet est commis par Christian Montoya. Il montre que l’on peut mettre à la disposition des intégrateurs web une boite à outil, ainsi qu’un éditeur visuel pour faire des CSS et du HTML sémantique,
• pagecolumn — Générateur de maquette en plusieurs colonnes avec CSS 2.0 en utilisant les %, les px ou les em. Possibilité d’imbriquer plusieurs colonnes ou des faire des effets de menus à onglets,
• drawter — Déjà évoqué sur ce blog : drawter, dessiné, c’est gagné,
• CSS Grid Calculator — Pour visualiser rapidement une maquette à partir d’une grille : les blocs de texte et les divisions de la page en colonnes (et les goutières qu vont avec) s’affichent dans le navigateur. En prime, vous obtiendrez les déclarations des styles CSS !

Encore un effort !

• CSS Compressor,
• CSS Compressor Advanced (cssdrive),
• Cascading Style Sheets Optimization,
• Labo CSS.

Formulaires HTML efficaces en 10 étapes

Consultez l’excellent article de bbxdesign sur les 10 bonnes pratiques pour réaliser un formulaire basé sur la conférence de Luke Wrobleski de Yahoo! dont voici le sommaire :

1. Aller droit au but,
2. Alignement des labels,
3. Aide et astuces,
4. Validation,
5. Actions primaires et secondaires,
6. Actions en cours,
7. Erreurs,
8. Input inutiles,
9. Organisation du formulaire,
10. Engagement graduel.

Téléchargez la conférence audio The Value of Web Forms and Design Constraints au format mp3 (27.9 MB).

Autres ressources pour les formulaires HTML

• JotForm — Création de formulaires en ligne,
• webjackalope — 12 exemples de formulaires d’inscription pour «feignasse».

Splittez votre contenu en plusieurs parties redimensionnables avec jQuery Splitter

C’est sur Dator Blog que j’ai déniché jQuery Splitter tout droit sorti de chez Dave Methvin. Ce plugin permet d’afficher une séparation entre deux contenus de la forme :

<div id="MySplitter"> 
    <div> Left content goes here </div> 
    <div> Right content goes here </div> 
</div> 

L’appel de la fonction étant réduit au strict minimum :

$().ready(function(){ 
    $("#MySplitter").splitter(); 
});

La splitbar peut être déplacée très facilement de manière accessible en cliquant-glissant, avec une accessKey ou encore via la touche tab.

Autres ressources Javascript

• 390 ressources Javascript et jQuery — Les fruits de la veille documentée que j’effectue depuis deux ans sur le blog Javascript & Webdesign.

20 mémos utiles pour tout webdesigner

Une bonne palanquée de Cheat Sheet (à vos souhaits) pour ne plus oublier les raccourcis Photoshop, les propriétés des CSS, les éléments HTML, etc. Mention spéciale pour :

• Blueprint 0.8 (via Christian Montoya),
• récapitulatif des fontes communes (ou pas) entre les systèmes d’exploitation Windows et MacOS,
• Kit de survie du créatif oeuvrant dans les métiers du graphisme,
• Les coulisses d’un design par Douglas Bowman,
• Mémo de la maquette web par Romy Duhem-Verdière qui nous rappelle les éléments à prendre en compte et les bonnes pratiques pour la composition de vos pages, les hyperliens, les textes, les formulaires, les éléments multimédias, ainsi que les mentions o-bli-ga-toires.

Miscellannées

Google Analytics — Identifiez les lecteurs en provenance de Netvibes

Généralement, les informations aggrégées par les outils de mesure d’audience ne permettent pas de connaitre le nom (ou le pseudo) des visiteurs ! Google Analytics vous permet en seulement trois clics d’en savoir plus :

1. Cliquez sur Traffic Sources (Sources de trafic),
2. Puis sur Referring Site (Sites Référents),
3. Rendez-vous dans la liste des sites et cliquez sur Netvibes,
4. Enjoy ;)

Bref, je suis sûrement le dernier à avoir cliqué sur Netvibes pour afficher les visiteurs concernés, mais si je suis l’avant-dernier, je me dis que ça servira au moins à une personne ;)

T’es qui, toi, déjà ?

Ping.eu ou tout ce que vous avez toujours voulu savoir sur une adresse IP ou un nom de domaine sans jamais avoir osé le demander : Ping, Traceroute, DNS lookup, WHOIS, Port check, Reverse lookup, Proxy checker, Mail relaying, Bandwidth meter, Network calculator, Network mask calculator, Country by IP, Unit converter  !

Stay tuned and mind the gap!

PS : n’oubliez pas la grosse grosse liste de 1000 ressources pour webdesiger et développeurs web !

Articles sur le même sujet

• 100+ comptes Twitter pour webdesigner
• Améliorations cosmétiques et ergonomiques sur ce blog
• Le petit journal du web — WordPress, développement web, etc.
• 390 ressources Javascript & jQuery
• WordPress de A à Z — E comme Extensions (les plugins)

Avec un peu de retard, voilà le 59ème. On commence direct avec les annonces officielles :

jQuery UI 1.8.17 est disponible !

Bon vous l’aurez compris au numéro de version, c’est juste une mineure. Dans le ventre, elle corrige des problèmes du widget Accordion, Autocomplete, Button, Datepicker, Droppable, Position, Progressbar, Selectable, Sortable et Tabs plus quelques bidouilles du côté des CSS. Rien de formidable en soit mais la consolidation est toujours nécessaire. Comme presque toujours, c’est Scott González qui a fait l’annonce et comme d’habitude vous y trouverez le changelog complet.

Todd Parker a publié à propos d’une très prochaine version de jQuery Mobile du genre 1.0.1. En soit, pareil, une version mineure donc des corrections. Mais cela prépare surtout l’arrivée de la 1.1 sur laquelle ils travaillent à fond. Et on a eu le droit à un aperçu. Il y aura donc :

• support de l’AMD, c’est à dire du chargement dynamique des modules, pratique pour éviter de tout charger comme des boeufs dès le début ;
• « true fixed toolbars« , le point qui leur pose le plus de soucis. Mettre en place des zones de boutons/infos comme dans les vraies applis relève plus du défi psychologique et de la mise à l’épreuve de la patience/détermination. D’un point de vue technique, c’est le bordel dû à la différence entre chaque terminal ;
• transitions ajax améliorées, les transitions sont souvent un peu brutales, le but est de les rendre plus souples (« smooth » en anglais).

Et forcément, plein d’entrain, il a même parlé de la 1.2 avec l’arrivée de nouveaux widgets dont possiblement une popup. Oui, le mot maudit qu’on a renommé pour faire plus sympa popin, lightbox ou encore modalbox quand on en revient aux logiciels lourds. Donc ça ça arrivera aussi bientôt sur jQuery Mobile. Au cas où ça vous dirait de voir ce que ça donne, voilà une démo.

Dernier point sur jQuery Mobile, Todd Parker a également appelé à présenter vos cas d’utilisations si vous avez un exemple de transitions qui rame bien, histoire d’avoir une base de travail pour les prochaines optimisations.

D’ailleurs en parlant de mobile, il y a jQ.Mobi qui vient de débarquer sur le marché, encore en beta d’ailleurs. Je n’ai pas du tout eu le temps de regarder ce que ça fait mais ça a l’air joli et relativement réactif. Oui, dès fois, c’est bien aussi ce genre de choses.

Je rappelais l’autre jour l’importance de n’utiliser jQuery que quand strictement nécessaire, pour des questions de performances. Un développeur du nom de Richard Bradshaw a fait une démo très simple pour montrer qu’il en va de même entre les transitions CSS et celles proposées via jQuery.

Je vous propose de finir sur le « LOL » de la semaine, avec un mec qui en direct d’un exam demande un coup de main pour jQuery. D’ailleurs comme dit dans les commentaires, si il avait suivi un minimum en cours, ça il aurait su faire.

A la semaine prochaine pour la chronique et à demain à priori pour un nouveau billet