Ajouter un beau hover à la galerie par défaut de WordPress avec jquery

jquery

Pour mon portofolio, j’avais besoin d’améliorer la galerie photo de base de WordPress.
Elle me convenait, toutefois je souhaitais que sur le roll hover apparaisse un fond blanc sur lequel le nom de la référence soit marqué.
L’idée est de récupérer le title de l’image et de le coller dans le h3 d’un div caché qui ne s’afficherait qu’au passage de la souris.

L’exemple se trouve ici : http://webdesign.niums.com/clients/

Pour rappel voilà de quoi est composée la galerie créée par WordPress
.gallery : class de la galerie
.gallery-item : dl : conteneur
.gallery-icon :dt : élément à définir
.attachment-thumbnail : notre miniature

Voilà ce que nous allons y ajouter grâce à jquery
.hide : un div qui contiendra notre texte
h3 : une balise de titre
XXX : notre texte en le copiant depuis la balise title de l’image

Préparons nos fichiers

Nous aurons besoin
– de créer un fichier javascript externe que nous chargerons : site.js
– de modifier le fichier css de wordpress : style.css

Tout d’abord créons un fichier javascript que nous enregistrerons dans un dossier js de notre dossier de thème.

Nous appellerons ce fichier dans le header.php ou le footer.php selon notre convenance : soit avec un chargement en mémoire avec un enqueue soit directement dans le fichier header

Charger les scripts en mémoire : Version wp_enqueue_scripts

Dans le fichier function php, ajoutons le code ci-dessous

 
/**
 * chargement de jquery, de la feuille de style et du fichier js
 */
function niums_scripts() {
 
 /* 
 chargeons jquery 
 wp_enqueue_scripts action hook charge seulement en front end 
 si les scripts sont nécessaires en admin on peut aussi 
 utiliser admin_enqueue_scripts 
 */	
 
   // l'appel à jquery qui est déjà inclus dans wordpress
   wp_enqueue_script('jquery'); 
   // appel du fichier styles.css
   wp_enqueue_style( 'style', get_stylesheet_uri() );
 
   // chargement de site.js en faisant attention à ce que jquery soit chargé avant 
   // (en tant que dépendance) puis on le charge dans le footer
   //wp_enqueue_script( $handle    ,$src    ,$deps    ,$ver    ,$in_footer );
    wp_enqueue_script( 'site.js', get_template_directory_uri() . '/js/site.js', array( 'jquery' ), '' , TRUE );
 
}
 
add_action( 'wp_enqueue_scripts', 'niums_scripts' );

Charger directement les scripts dans le header

Si pour une raison ou une autre, le chargement en mémoire ne vous convient pas, vous pouvez aussi charger directement les fichiers dans header.php entre head et /head

 
// Par défaut, jQuery est chargé dans le thème, pas besoin de le recharger
// charger le fichier js
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/site.js"></script>
 
// votre fichier style est normalement déjà chargé comme suit
 <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

Création de notre js

Maintenant que tous nos fichiers sont chargés, nous pouvons créer nos fonctions.

PS : J’ai modifié mon appel à la fonction principale qui se fait lorsque le document est prêt afin qu’on puisse utiliser $() comme alias et cela sans conflit.

jQuery(document).ready(function($){
    // ici on peut utiliser $() avec la certitude que c'est jQuery, sans conflit possible
   // le code qui suit se placera donc ici
});

Pour commencer, ajoutons la classe wrap à chaque liste de définitions.
Cette class permettra aux listes d’avoir des positions « relative » afin que le futur div .hide, qui contient notre texte, puisse être positionné au-dessus des images car en position « absolute »

 
$(".gallery-item").addClass("wrap");
 
// puis attachons un gestionnaire d'évènement à la class wrap
 
$(".wrap").on({
   mouseover: function() {
      	$(".hide", this).stop().fadeTo(300, 1.0); // on définit le hover à 100%
   },
     mouseout: function() {
      	$(".hide", this).stop().fadeTo(300, 0); //  on définit le hover à 0%
  }
 });
 
//.puis nous ajoutons notre div .hide :  après  .gallery-icon 
 
$(".gallery .gallery-item .gallery-icon").append('<div class="\'hide\'"></div>');
 
// puis nous créons un h3 dans le .hide
 
$(".gallery .gallery-item .gallery-icon .hide").wrapInner('<h3>'); 
 
// puis nous copions le title dans le h3 en le recopiant depuis la balise title de l'image 
 
$(".gallery .gallery-item .gallery-icon").each(function (index) { 
var leTitre = $(this).find(".attachment-thumbnail").attr('alt');
$(this).find(".hide h3").text(leTitre);

Pour infos jQuery peut accepter un second paramètre afin d’écraser le contexte de la sélection

 $("img", this);
// est la même chose que
 $(this).find("img");

Et si l’image est un descendant direct de l’élément cliqué alors nous pouvons aussi écrire :

$(this).children("img");

En ce qui concerne le css, rien de spécial

Ajoutez le code ci-dessous dans votre fichier style.css

/* Wraps */
.wrap {
	position:relative;
	width:100%;
	height:auto;
}
 
.hide {
        display:none;
	background-color:#fff;
	background-color:rgba(255,255,255,.9);
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:2;
}

Pour info

Dans WordPress il est possible de choisir le nombre d’images par ligne.
Dans le cas contraire, pour décider du nombre d’éléments par ligne, on pourrait aussi écrire :

 
dl dt:nth-child(4n){clear:left;} 
//ou
ul li:nth-child(4n){clear:left;}

Voilà +++

Les caractères cachés sous mac os

Dark Vardor in Typography

Antislash sous Mac OS

Comme vous devez  l’avoir remarqué, il n’y a pas de caractère antislash ( \ )   sur le clavier du mac.

Pour saisir cette barre oblique  inversée il faudra saisir la combinaison :

alt + maj + /

Tilde sous Mac OS

Pour saisir le caractère tilde ( ~ )  il faudra saisir la combinaison

alt + n

Crochet sous Mac OS

Pour saisir le caractère crochet gauche ( [ )  il faudra saisir la combinaison

alt + maj + (

Pour saisir le caractère crochet droit ( ] )  il faudra saisir la combinaison

alt + maj + )

Voila !

Le minitel c’est fini, Flash aussi… enfin presque !

Minitel et Flash mobileLe minitel à réellement tiré sa révérence la nuit du 30 juin 2012… Inventé il y a 30 ans (en 1982 pour être exact), le minitel qui était encore utilisé par plus de 400 000 internautes clients s’est éteint.
N’étant plus rentable, France Telecom a en effet décidé que la concurrence du web, du mobile et de leur modèle décentralisé ne lui permettait plus de garder cette objet « vintage » sur le marché.

Quel rapport avec Flash me direz-vous ? C’est pourtant évident : web et mobile ont sonné le glas du minitel et pour flash, c’est encore eux qui signe son arrêt…enfin presque.

Pour être précis, l’arrivée d’Android 4.1 a confirmé la disparition de flash player pour les nouveaux terminaux Google . A partir du 15 août Adobe arrêtera la distribution de Flash player sur Google Play et passé cette date, seuls les terminaux équipés d’Android 4.0 ou version antérieure, avec flash installé en usine pourront accéder au téléchargement du player sur Google play.

Comme pour le minitel, le marché a dicté sa loi et Flash sur mobile a obéi. Le bon coté des choses pour les développeurs : le choix entre applications web mobile et applications natives ne sera plus à l’ordre du jour !
A noter que Flash player est le plug-in installé au sein du navigateur pour afficher le contenu Flash sur les pages internet alors que AIR, qui permet de créer des applications à part entière, permet la création d’apps sur Android, Blackberry OS, IOS ou encore Windows mobile.

Flash player disparait donc, mais le développement mobile sous Flash (AIR en fait partie), lui, a de beaux jours devant lui.

— RIP 3615 ULLA —