Il est toujours compliqué de proposer au internautes de trier des éléments et faire ça de manière simple et ergonomique. On peut, par exemple, proposer de saisir la position pour chaque élément. Mais ça reste contraignant.

C’est dans cette optique qu’apparaît l’option du drag’n'drop (glisser-déposer en français). Je pense que c’est ce qu’il y a de plus simple et intuitif pour l’internaute. Il faut néanmoins le prévenir que l’on attend un glisser-déposer de sa part car ce n’est pas encore répandu absolument partout !

Voir la démo du tutorial

Pour réaliser cela, JQueryUI nous propose le widget nommé Sortable. Il permet de créer et de configurer le drag’n'drop pour une liste d’éléments. Pour commencer, il faut donc inclure : JQuery et JQueryUI (javascript et CSS).

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" href="jquery-ui-1.8.5.custom.css" type="text/css" />
<script type="text/javascript" src="jquery-ui-1.8.5.custom.min.js"></script>

Pour sauvegarder le tri fait par l’internaute, il faut enregistrer le tout dans la base de données. Je te fournis donc celle utilisée dans la démo. Où chauqe élément à un id unique, name contient le nom du fichier de la photo et position pour enregistrer l’ordre des photos.

-- 
-- Structure de la table `demo_photo`
-- 
CREATE TABLE `demo_photo` (
  `id` int(11) NOT NULL auto_increment,
  `name` varchar(255) collate latin1_german2_ci NOT NULL,
  `position` int(11) NOT NULL,
  PRIMARY KEY  (`id`),
  KEY `order` (`position`)
) AUTO_INCREMENT=6 ;
 
-- 
-- Contenu de la table `demo_photo`
-- 
INSERT INTO `demo_photo` VALUES (1, '1.jpg', 2);
INSERT INTO `demo_photo` VALUES (2, '2.jpg', 3);
INSERT INTO `demo_photo` VALUES (3, '3.jpg', 4);
INSERT INTO `demo_photo` VALUES (4, '4.jpg', 1);
INSERT INTO `demo_photo` VALUES (5, '5.jpg', 0);

Ensuite il faut préparer la liste d’éléments sur lequel se portera le tri. Les attributs « id » des éléments de la liste devront respecter une syntaxe particulière : « nomGenerique_id ». Ou nomGenerique est le même pour tout les éléments (par exemple « photo ») et id l’identifiant unique (dans la base de données) de l’élément à trier.

Pour afficher la liste, on récupère bien sûr les éléments dans la base de données, en respectant l’ordre enregistré :

<ul id="list-photos">
	<?php
	//connexion à la base de données 
        define('DB_NAME', 'nom_de_la_base');
        define('DB_USER', 'nom_utilisateur');
        define('DB_PASSWORD', 'mot_de_passe');
        define('DB_HOST', 'localhost');
	$link   =   mysql_connect( DB_HOST , DB_USER , DB_PASSWORD );
	mysql_select_db( DB_NAME , $link );
 
	// récupération des photos dans le bon ordre
	$result =   mysql_query( 'SELECT demo_photo.id, demo_photo.name FROM demo_photo ORDER BY demo_photo.position ASC' , $link );
	while( $photo = mysql_fetch_assoc( $result ))
	{
	?>
	<li id="photo_<?php echo $photo['id'] ?>">
		<img src="photos_NY/<?php echo $photo['name'] ?/>" alt="Photos NY - Arnaud-k" />
		<p>par Arnaud-k</p>
	</li>
	<?php
	}
	?>
</ul>

Il faut ensuite mettre en forme cette liste avec du CSS. Je ne pense pas qu’il faille beaucoup d’explications pour cette partie là.

/* style global de la liste non ordonné */
ul#list-photos{
  list-style:none;
  height:140px;
}
/* style des éléments de la liste */
ul#list-photos li{
  border:1px solid #ddd;
  padding:10px;
  cursor:move;
  height:100px;
  width:75px;
  float:left;
  margin-right:10px;
  background:#fff;
  color:#212326;
  font-size:12px;
  -moz-box-shadow:2px 2px 5px #ccc;
}
/* style de l'élément fantome, qui apparait losque que l'on bouge un élément */
ul#list-photos li.highlight{
  background:#f2f2f2;
  border:1px dashed #212326;
}

Ensuite vient la partie qui nous intéresse vraiment, le code JQuery. On initialise Sortable avec l’id de la liste et on met en Callback l’appel Ajax au fichier PHP qui va procéder à l’enregistrement dans la base données :

$(document).ready( function(){ // quand la page a fini de se charger
  $("#list-photos").sortable({ // initialisation de Sortable sur #list-photos
	placeholder: 'highlight', // classe à ajouter à l'élément fantome
	update: function() {  // callback quand l'ordre de la liste est changé
		var order = $('#list-photos').sortable('serialize'); // récupération des données à envoyer
		$.post('ajax.php',order); // appel ajax au fichier ajax.php avec l'ordre des photos
	}
  });
  $("#list-photos").disableSelection(); // on désactive la possibilité au navigateur de faire des sélections
});

Et voici enfin le contenu du fichier ajax.php qui enregistre les positions des éléments. On récupère un $_POST de la forme : photo[] = id_photo. Il suffit de boucler sur ce tableau ($_POST['photo']) et on récupère les id des photos dans l’ordre :

<?php
//connexion à la base de données 
define('DB_NAME', 'nom_de_la_base');
define('DB_USER', 'nom_utilisateur');
define('DB_PASSWORD', 'mot_de_passe');
define('DB_HOST', 'localhost');
$link   =   mysql_connect( DB_HOST , DB_USER , DB_PASSWORD );
mysql_select_db( DB_NAME , $link );
 
// changement de l'ordre des photos dans la base de données, photo par photo
foreach( $_POST['photo'] as $order => $id_photo )
{
    mysql_query( 'UPDATE demo_photo SET position = \'' . safe( $order ) . '\' WHERE id = \'' . safe( $id_photo ) . '\'' , $link ) or die( mysql_error() );
}
 
/*****
fonctions
*****/
function safe($var)
{
	$var = mysql_real_escape_string($var);
	$var = addcslashes($var, '%_');
	$var = trim($var);
	$var = htmlspecialchars($var);
	return $var;
}
?>

J’espère que tutoriel est clair et compréhensible. Il faut, certes, un minimum de connaissances en html, javascript et php mais je pense que ça vaut quand même le coup !

Pas encore de billet sur le même sujet !

Tutorial bien sympa trouvé sur le blog 9lessons : « Twitter like Search with jQuery and Ajax » (« recherche à la twitter avec JQuery et Ajax »). Ce tuto permet donc de créer un formulaire de recherche tout en Ajax. Les résultats sont donc affichés directement sur la même page que le formulaire.

Une démo est disponible directement sur le blog 9lessons.
Voir la démo

A noter que l’on également télécharger les scripts expliqués dans le tutorial. On y retrouve le JQuery, le PHP, l’HTML et même un peu de CSS. Le tuto est bien complet, l’effet de recherche en Ajax est toujours classe. J’espère juste pour toi que tu comprends l’anglais…

Pas encore de billet sur le même sujet !

Avec le passage de JQuery à la version 1.3 (actuellement 1.3.2), est apparu un nouvel événement : live.

Live permet d’ajouter des listeners (‘écouteurs’ d’événements) sur des éléments du DOM générés en JQuery. Avant la création de cet événement, il fallait redéfinir, pour chaque élément du DOM, les écouteurs d’événement. Cet événement est surtout pratique pour l’utilisation d’AJAX, pour ajouter des controlleurs sur du code retourné par l’appel AJAX.

Voici un exemple (celui donné par la documentation officielle) :

1
2
3

$("p").live("click", function(){
      $(this).after("<p>Another paragraph!</p>");
    });

Ici, à chaque clic sur un paragraphe, un nouveau paragraphe est créé. Grâce à l’événement live, on peut également cliquer sur les paragraphes générés par JQuery. On remarque aussi que l’appel à l’événement live requiert deux paramètres : le premier correspond au nom de l’événement que l’on veut assigner à live (ici on ajoute l’événement « click » aux paragraphes)  et en second le code qui doit être exécuté à l’événement.

Pas encore de billet sur le même sujet !

Tutorial pour JQuery vu ce matin sur le blog sohtanaka.com. Le tutorial propose une manière de créer des colonnes « intelligents » avec JQuery & CSS.

Le CSS permet ici de gérer l’affichage des colonnes par défaut, de définir leur taille, les marges entre les colonnes… Et le JQuery permet de répartir les colonnes s’il reste de l’espace sur le côté, de gérer dynamiquement l’affichage (si la taille de la fenêtre est modifiée).

Tout le code nécessaire est donné dans le tutorial. Il peut permettre un bon gain de temps, plus besoin de calculer la taille au pixel entre les colonnes, les marges, les paddings et le conteneur !

Pas encore de billet sur le même sujet !

Pour le retour des tutoriels JQuery pour l’utilisation de plugins, je propose aujourd’hui de coupler 2 plugins (JCarousel et Lytebox) pour faire une petite galerie photo.

Lytebox n’est pas à proprement parler un plugin JQuery, il est totalement indépendant du framework. Il permet d’afficher les photos en grand format à l’écran, devant le contenu du reste du site.

Voir la démo de Tutorial JQuery : galerie photo avec JCarousel et Lightbox

Après avoir télécharger les 2 plugins, il faut les importer dans la page HTML où tu souhaites créer ta galerie photo :

1
2
3
4
5
6

<link href="css/jquery.jcarousel.css" rel="stylesheet" type="text/css" />
<link href="css/lytebox.css" rel="stylesheet" type="text/css" />
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.pack.js"></script>
<script type="text/javascript" src="js/lytebox.js"></script>

Le deux premières lignes permettent d’importer les 2 feuilles de style des plugins, chacune étant nécessaire au bon fonctionnement des plugins. On pourrait les fusionner dans un seul fichier pour optimiser le temps de chargement de la page, mais dans un soucis de clarté je les ai laisser séparé. Les lignes 4 à 6 permettent d’importer tout d’abord JQuery, le plugins JQuery JCarousel et enfin Lytebox.

Il faut ensuite préparer le code HTML pour permettre l’affichage du caroussel de photos (en miniature). Pour que le plugin JCarousel fonctionne, il faut créer une liste non-ordonnée (>ul<) avec pour chaque élément (&ht;li<) une image. Enfin pour permettre l’agrandissement des photos avec Lytebox, j’ai crée un lien sur les miniatures pointant vers l’adresse de la grande photo correspondante. Il faut aussi ajouter l’attribut « rel » (avec la valeur « lyteshow » pour lance un diaporama) sur les liens pour que le lien fonctionne avec la Lytebox.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<ul class="jcarousel-skin-tango"> <!-- la classe correspond au skin choisi pour le plugin JCarousel -->	
 
	<li><!-- on créé un élément de la liste -->
                <a href="images/1-2.jpg" rel="lyteshow" title=""><!-- lien pointant vers la photo en gran format, ajouter une valeur à l'attribut title pour afficher une légende -->
                     <img src="images/1.jpg" alt="" /><!-- on affiche la miniature -->
                </a><!-- on ferme le lien ;) -->
        </li><!-- on ferme l'élément de liste pour en ouvrir d'autres après -->		
	<li><a href="images/2-2.jpg" rel="lyteshow" title=""><img src="images/2.jpg" alt="" /></a></li>								
	<li><a href="images/3-2.jpg" rel="lyteshow" title=""><img src="images/3.jpg" alt="" /></a></li>								
	<li><a href="images/4-2.jpg" rel="lyteshow" title=""><img src="images/4.jpg" alt="" /></a></li>								
	<li><a href="images/5-2.jpg" rel="lyteshow" title=""><img src="images/5.jpg" alt="" /></a></li>								
	<li><a href="images/6-2.jpg" rel="lyteshow" title=""><img src="images/6.jpg" alt="" /></a></li>								
	<li><a href="images/7-2.jpg" rel="lyteshow" title=""><img src="images/7.jpg" alt="" /></a></li>								
	<li><a href="images/8-2.jpg" rel="lyteshow" title=""><img src="images/8.jpg" alt="" /></a></li>								
	<li><a href="images/9-2.jpg" rel="lyteshow" title=""><img src="images/9.jpg" alt="" /></a></li>								
	<li><a href="images/10-2.jpg" rel="lyteshow" title=""><img src="images/10.jpg" alt="" /></a></li>									
	<li><a href="images/11-2.jpg" rel="lyteshow" title=""><img src="images/11.jpg" alt="" /></a></li>							
	<li><a href="images/12-2.jpg" rel="lyteshow" title=""><img src="images/12.jpg" alt="" /></a></li>				
	<li><a href="images/13-2.jpg" rel="lyteshow" title=""><img src="images/13.jpg" alt="" /></a></li>
 
</ul>

On peut bien sûr personnaliser l’affichage en modifiant les fichiers CSS des deux plugins. Il est bien entendu nécessaire de modifier le CSS du plugin JCarousel si tu as des miniatures qui ont un autre format, mais le plugin fonctionne mieux avec des images carrées (ou juste l’élément du liste avec un « overflow:hidden »). Pour comprendre les modifications, je te conseille de partir des exemples donnés avec le plugin JQuery JCarousel ou partir de mon exemple disponible en téléchargement ici.

Pas encore de billet sur le même sujet !

Série de tutoriels sur JQuery que je continue ici. L’idée est de commencer de zéro (les premiers tutoriels ne sont donc pas adaptés aux connaisseurs de JQuery). Je vais essayer de faire connaître un peu mieux cette librairie aux non-initiés !

J’ai découpé cette série en 7 épisodes, la difficulté devrait aller crescendo !

Retrouve le premier tutorial : installation et Hello World !

——————-

Pour le deuxième tutorial de la série « découvrez JQuery », je vais parler des sélecteurs disponibles dans JQuery. En effet pour faire des animations de la mort qui tue, il faut pouvoir sélectionner et pointer les bons éléments.

Et c’est déjà que l’on peut voir la puissance de JQuery, plein de type de sélecteurs différents existent. Comme tu as pu le voir avec le premier tutorial JQuery, les sélecteurs ressemble au premier abord à des sélecteurs CSS.

Par exemple, pour sélectionner un lien possédant un id (et pour détecter le click sur ce lien) il suffit de faire :

1
2
3

$("#idDuLien").click(function() {
       // code à exécuter au click sur le lien ayant pour id "idDuLien" ( <a href="url-du-lien.html" id="idDuLien">Lien</a> )
});

Ensuite avec du contenu dynamique (généré, par exemple, en PHP) on n’a pas forcément des id partout. Les sélecteurs marchent également avec les classes (il suffit de remplacer le # par un .). Pour les exemples qui suivent, on va se mettre dans le cas d’une liste d’éléments ayant tous la même classe.

1
2
3
4
5
6
7
8
9
10
11
12

<div class="bloc">
     Honoratis nullum adhibens modum nec licentia licentia disseminata adhibens modum iam vexabat iam honoratis vexabat.
</div>
 
<div class="bloc">
     Nosmet amicitia amicum erga amicis termini se De termini tanti sunt fiat erga quanti amicis ipse in se ut pariter.
</div>
 
<div class="bloc">
     Suspicionum blanditiae simulantium ubi suspicionum exclamabant salute asperitati amplitudo eius vocibus dicebatur vel proximorum amplitudo imperii statum 
     proximorum statum asperitati si statum exclamabant cruentae ubi laesa enim et dolere laesa.
</div>

Pour le premier cas, on ne veut sélectionner que le premier élément, pour cela pas besoin de se prendre la tête, il suffit de faire son sélecteur sur la classe comme d’habitude et ajouter « :first », comme ceci :

1
2
3

$("div.bloc:first").mouseover(function() {
       // code à exécuter au survol du premier bloc ayant pour class "bloc"
});

Il existe plusieurs sélecteurs de ce type, voici quelques exemples :

• :first – pour sélectionner le premier élément.
• :last – pour sélectionner le dernier élément.
• :nth-child(5) : pour sélection le 5ème élément (bien entendu tu peux mettre le nombre que tu souhaites !).
  
• :even – pour sélectionner les éléments pairs à partir de zéro. C’est-à-dire le 0ème, le 2ème, le 4ème… Idéal pour coloriser une ligne sur deux d’un tableau.
• : odd – pour sélectionner les éléments impairs.
• :visible – pour sélectionner les éléments visibles qui ne sont pas en « display:none », en « opacity:0″ ou en « visibility:hidden ».
• :hidden – pour sélectionner les éléments non-visibles.
• :contains(texte) – pour sélectionner les éléments qui contiennent le texte passé en paramètre (attention cette fonction peut être gourmande en ressource).
• :checked – pour sélectionner seulement les élément coché (pour les checkbox)

Déjà avec ces différents sélecteurs, il y a de quoi s’amuser ! Après on peut également préciser le sélecteur en fonction de la valeur d’un attribut. Cela peut être utile pour sélectionner un input en fonction de son attribut « name » :

1
2
3

$("input[name=prenom]").mouseover(function() {
       // code à exécuter au survol du champ de texte ayant l'attribut name égal à "prenom"
});

On peut  utiliser des jokers pour le test :

• [name^=val] : la valeur de l’attribut name doit commencer par « val ». Par exemple : « valeur ».
• [name$=val] : la valeur de l’attribut name doit finir par « val ». Par exemple : « laval ».
• [name*=val] : la valeur de l’attribut name doit contenir « val ». Par exemple : « avaliser ».

Il existe d’autres façons encore de préciser les sélecteurs avec JQuery. Mais il y a déjà de quoi faire avec ce qu’on vient de voir. Pour plus de détails sur les sélecteurs, je t’invite à aller faire un tour sur la documentation JQuery sur les sélecteurs (en français). Ramassage des copies dans 5 minutes

Pour le prochain tutorial de la série (qui devrait être en fin de semaine ou en début de semaine prochaine), je développerai les différents événements qui existent et on pourra par la suite commencer à faire nos premières animations avec JQuery !

Pas encore de billet sur le même sujet !

Série de tutoriels sur JQuery que je commence ici. L’idée de de commencer de zéro (donc si tu connais un peu JQuery, ce premier tutoriel sera inutile pour toi). Je vais essayer de faire connaître un peu mieux cette librairie aux non-initiés !

J’ai découpé cette série en 7 épisodes, la difficulté devrait aller crescendo !

——————-

JQuery est un framework JavaScript. C’est-à-dire un ensemble de bibliothèques JavaScript. Il propose tout un environnement pour faire du JavaScript le plus simplement possible et le plus rapidement possible. Ce n’est pas pour rien si la devise de JQuery est :

« Write less, do more. »

en français : « Ecrivez moins, faîtes-en plus. »

JQuery en est actuellement à la version 1.3.2. Il est disponible en téléchargement sur le groupe code.google de JQuery. La version minifiée (minified en anglais) ne fait que 55 Kio et se présente sous la forme d’un simple fichier JavaScript.

Commençons par le commencement. Pour l’installer, il faut au préalable télécharger JQuery puis l’uploader sur le serveur de ton site. Ensuite, il suffit tout simplement d’importer le fichier JavaScript comme tu le ferais pour un fichier JavaScript quelconque. Le code suivant est à placer entre les balises <head> et </head> de la page (dans le cas où le fichier se trouve dans un dossier nommé « js ») :

<script type="text/javascript" src="js/jquery.1-3-2.js"></script>

Voilà JQuery est installé !

Ensuite le code JavaScript que l’on va rédiger est à insérer dans un fichier JavaScript comme n’importe quel fichier (ou insérer le code directement dans le fichier html, je ne traiterai pas cette méthode ici). Il faut donc également importer ce second fichier JavaScript (contenu également dans le dossier « js » et nommé « script.js ») dans la page que tu souhaites. Il faut bien faire attention à l’ordre et bien penser à charger le framework avant les scripts perso.

On se retrouve donc avec ces deux lignes dans la page html :

<script type="text/javascript" src="js/jquery.1-3-2.js"></script>
<script type="text/javascript" src="js/script.js"></script>

La première chose que l’on va faire, c’est afficher un message d’alerte sur au clic sur un lien. On va donc ajouter le lien dans la page html. Il faut bien penser à mettre un id ou une classe sur ce lien pour pouvoir le distinguer des autres liens éventuellement présents sur la page :

<a id="monLien" href="http://blog.arnaud-k.fr">Lien vers mon blog</a>

Nous allons donc enfin utiliser JQuery ! Le code qui suit sera donc à mettre dans le fichier script.js.
En JavaScript pur, pour ajouter l’événement il aurait fallu ajouter l’attribut « onclick » directement dans la balise html. Avec JQuery, la logique est différente, tout va se passer dans le fichier script.js.

La première chose à faire est de dire à JQuery d’exécuter le code que quand le DOM (la structure de la page) est entièrement chargé. Dans le cas contraire, il peut se produire des erreurs si on essaie d’atteindre un élément qui n’a pas encore été chargé. C’est l’équivalent de l’attribut « onload » qui était placé dans le code de la balise . Au final, on retrouvera le petit bout de code qui suit dans tous les fichiers de scripts qui utiliseront JQuery :

$(document).ready(function() {
                   // code JQuery à exécuter quand la page est chargé
                   // encore plus de code...
});

On va donc devoir détecter si le lien ayant pour id « monLien » a été cliqué. Avec JQuery, toutes les fonctions JavaScript natives ayant des noms à rallonge telles window.document.getElementById deviennent inutiles. Maintenant pour sélectionner un élément, on utilise la fonction « $ » qui prend en paramètre un sélecteur (voir le tutoriel qui va suivre sur les différents types de sélecteurs). Les sélecteurs de type CSS peuvent aussi être utilisés.

Pour détecter un clic, on utilise l’événement « click ». Tu auras forcément remarqué que l’intitulé de l’événement a changé par rapport au JavaScript pur (« onclick »). On se retrouve donc avec ceci dans le fichier script.js :

$(document).ready(function() {
                  $("a#monLien").click(function() { // si le lien ayant pour id "monLien" est cliqué, on exécute le code à la suite
                               // code à exécuter quand le lien est cliqué
                               // encore du code à exécuté le lien est cliqué
                  });
});

Si la logique de ce code est comprise, je pense que c’est gagné ! . Tous les événements se passe ainsi (avec juste le sélecteur ou le nom de l’événement qui change).

Une fois le lien cliqué, on va afficher une simple boîte d’alerte (la fonction alert() en JavaScript) pour voir si le code est bien exécuté au clic sur le lien :

$(document).ready(function() {
                  $("a#monLien").click(function() { // si le lien ayant pour id "monLien" est cliqué, on exécute le code à la suite
                               alert("Hello World");
                  });
});

Comme tu as pu le constater, c’est maintenant un mélange de JQuery et de fonction JavaScript normal, tout ceci fonctionne parfaitement car c’est le même langage de programmation, JQuery n’étant qu’un framework JQuery !

Voilà, je pense que c’est déjà pas mal pour le premier jour de JQuery même s’il y a encore du boulot ! . Dans le prochain épisode, on va aller un peu plus loin avec les sélecteurs et commencer à manipuler le DOM

Pas encore de billet sur le même sujet !

Petite astuce toute simple pour faire apparaître facilement le favicon sur tous les liens externes présent sur la page.

Le code JQuery onstruit simplement l’URL de l’icone (de type http://www.example.com/favicon.ico) et l’affiche à côté du lien. Pour que l’affichage fonctionne, il faut absolument que le site en question est un favicon nommé favicon.ico à la racine du site (en théorie sur tous les sites possédant un favicon, si ceux-ci sont bien faits !). L’affichage se fait ensuite facilement : il faut définir le fond du lien et préparer la class CSS définissant le padding et empêchant le fond de se répéter.

JQuery favicon

1
2
3
4
5
6
7
8
9

$(document).ready( function () {
	jQuery('a[href^="http://"]').filter(function(){ // on détecte tous les liens ayant l'attribut href commençant par http://
     	return this.hostname && this.hostname !== location.hostname; // il faut que le domaine soit différent du domaine du site (on veut traiter que les liens externes)
	}).each(function() { // pour chacun des liens externes
		var link = jQuery(this); // on met les propriétés du lien dans une variable
		var faviconURL = link.attr('href').replace(/^(http:\/\/[^\/]+).*$/, '$1')+'/favicon.ico'; // on construit  l'url du favicon (de type http://www.example.com/favicon.ico)
		$(this).addClass("favicon").css("background-image", "url("+faviconURL+")"); // on ajoute la class CSS "favicon" au lien (pour le padding par exemple) et on définit le fond du lien
	});
});

Et c’est tout !
En exemple, je met également le code de la class CSS que j’ai utilisée pour la démo :

1
2
3
4
5

a.favicon { 
        padding-left:20px; 
        background-position:0 50%; 
        background-repeat:no-repeat; 
}

Pas encore de billet sur le même sujet !

Pour le développement d’un site que j’ai en cours, j’ai dû intégrer directement les Gravatars aux membres postant des commentaires. J’ai été tout bonnement étonné de la simplicité à mettre en place en PHP. Tout ça est en complément de tous les plugins et intégration native sur les CMS et plateformes de blog (Drupal, Joomla, Dotclear ou WordPress).

Pour rappel, un Gravatar (Globally Recognized Avatar) est une image qui vous suit sur tous les sites qui proposent leur intégration. Par exemple sur le blogs WordPress, quand un commentaire est laché, l’adresse email est demandé et à partir de cet adresse email, Gravatar retourne l’avatar de l’utilisateur. C’est aussi simple que ça.

C’est parfaitement intégrable sur tous les sites. Aucune inscription n’est nécessaire !

Voici comment le mettre en place en PHP :

1
2
3
4
5
6

$email = "arnaud-k@machin.com"; // l'adresse email de l'utilisateur
$default = "http://www.machin.com/avatar-par-defaut.jpg"; // l'url de l'image à afficher par défaut si l'utilisateur n'a pas de Gravatar
$size = 40; // la taille pour l'affichage du gravatar (celui-ci sera carré)
 
// on construit ensuite l'url du Gravatar
$gravatar = "http://www.gravatar.com/avatar.php?gravatar_id=".md5( strtolower($email) )."&default=".urlencode($default)."&size=".$size;

Il n’y a plus qu’à afficher le Gravatar en html :

<img src="<?php echo $gravatar ?/>" alt="nom du membre" />

Pas encore de billet sur le même sujet !

Pour ce premier « liens de la semaine », je te propose une petite sélection de tuto (souvent en anglais) pour Adobe Illustrator.

- Dessiner un texte fun et qui accroche l’oeil (avec divers effet tels que les reflets sur les lettres).

- Dessiner une peinture vectoriel, avec un effet d’aquarelle.

- Créer un effet lumineux et coloré.

Que du bon pour s’occuper pendant le week-end!

Pas encore de billet sur le même sujet !

J’ai découvert cette galerie il y a peu. SpaceGallery (en anglais, créée par Eyecon) propose un bel effet de transition entre les photos. L’effet ressemble à l’effet utilisé par Mac dans le logiciel Time Machine.

voir la demo du plugin JQuery Space Gallery

Le fonctionnement est assez simple si on respecte bien deux ou trois consignes :

Tout d’abord il faut charger le fichier CSS nécessaire au plugin :

et quelques instructions css sont également nécessaires (mais qu’il faudra adapter à la dimension de vos images) :

#myGallery { /* bloc contenant la galerie */
	width: 800px;
	height: 650px;
}
#myGallery img {
	border: 2px solid #52697E;
}
a.loading {
	background: #fff url(../images/ajax_small.gif) no-repeat center;
}

Il faut ensuite charger JQuery et les fichiers JavaScript nécessaires au plugin. Il faut bien respecter l’ordre pour le chargement des fichiers :

<script src="jquery.js" type="text/javascript"><!--mce:0--></script>
<script src="eye.js" type="text/javascript"><!--mce:1--></script>
<script src="utils.js" type="text/javascript"><!--mce:2--></script>
<script src="spacegallery.js" type="text/javascript"><!--mce:3--></script>

Ensuite dans ton fichier JavaScript insère le code suivant :

$(document).ready( function () {
   $('#myGallery').spacegallery({loadingClass: 'loading'});
});

Ce code initialise la galerie dans le bloc qui aura l’id ‘myGallery’. L’évènement .ready est la fonction de base de JQuery, elle permet l’exécution du script quand la page est complètement chargée.

Dans la page html4strict, on créé le bloc ‘myGallery’ dans lequel on insère les images que l’on souhaite afficher dans la galerie :

<div id="myGallery" class="spacegallery">
	<img src="photosExemples/2.jpg" alt="" />
	<img src="photosExemples/3.jpg" alt="" />
	<img src="photosExemples/4.jpg" alt="" />
	<img src="photosExemples/5.jpg" alt="" />
	<img src="photosExemples/6.jpg" alt="" />
	<img src="photosExemples/7.jpg" alt="" />
	<img src="photosExemples/8.jpg" alt="" />
	<img src="photosExemples/9.jpg" alt="" />
	<img src="photosExemples/10.jpg" alt="" /></div>

Le plugin est téléchargeable sur SpaceGallery, le .zip contient tous les fichiers nécessaires avec un exemple.

Pas encore de billet sur le même sujet !