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à +++

Migration vers wordpress 2.7 et modification du design

Et voila ma petite mise à jour vers wordpress 2.7 est faite et j’en ai profité pour refaire mon blog et voir les nouveautés apportées à wordpress.

Voici un petit avant après.

Dans les nouveautés de wp 2.7 j’ai surtout aimé :
– L’ergonomie de l’interface d’administration : les développeurs se sont enfin bouger sur cette parti. C’est surement du à tous les blogueurs qui râlaient sur cet interface d’administration.
– La mise à jour automatique de wordpress
– La gestion des plugins : installation et la mise à jour automatique.
– La possibilité de répondre aux commentaires directement dans l’administration.
– La personnalisation des commentaires par rapport à leurs auteurs avec un simple css : Continuer la lecture de « Migration vers wordpress 2.7 et modification du design »

Myspace’s tips flash et css !

Myspace urban kiss
Je n’ai pas eu réellement le temps de me remettre sur mon blog ces derniers temps. Pas mal de boulot en freelance et aussi coté musique.
En fait c’est sur ce dernier point que je vais écrire ce billet. Donc, dernièrement je me suis occupé du myspace du groupe de musique avec lequel je suis. D’habitude je ne me prends pas trop la tête étant donné que je n’ai fait qu’un seul myspace et c’était pour moi. Je fais soit un truc plus que simple ou j’utilise Love my flash. Cette fois j’ai eu envie de voir ce qui m’était possible de faire avec myspace. Voici quelques infos qui pourraient en intéresser quelques un.

J’ai donc tout d’abord caché le maximum d’élements avec display: none, ensuite j’ai créé quelque chose d’assez simple en css, crée mes flash, mélangé le tout et envoyé la préparation sur myspace et comme vous vous en doutez ça n’a pas du tout fonctionné au début.

Il faut savoir qu’on peut apparemment faire ce qu’on veut sur myspace tant qu’on ne cache pas les pubs.
Les # sont automatiquement supprimés, pas d’utilisation d’id donc et les commentaires s’écrivent : .r { écrire ici les commentaires}.

Autre chose myspace a bloqué la possibilité d’utiliser les getURL dans flash, on ne peut donc pas créer de lien dans un flash vers un autre myspace ou un site externe. C’est du en fait à une attaque par un vers utilisé dans flash en 2006. Vous remarquez donc à chaque fois que vous ajoutez un flash que celui-ci se voit inclure les propriétés ci-dessous :

&lt;param name="allownetworking" value="internal" /&gt;
&lt;param name="allowScriptAccess" value="never" /&gt;
&lt;param name="enableJSURL" value="false" /&gt;
&lt;param name="enableHREF" value="false" /&gt;

La seule solution trouvée pour le moment est Continuer la lecture de « Myspace’s tips flash et css ! »