Ajouter un beau hover à la galerie par défaut de WordPress avec 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

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

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.

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 »

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

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

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

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

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 :

Voilà +++

10 réponses sur “Ajouter un beau hover à la galerie par défaut de WordPress avec jquery”

  1. C’est exactement ce que je cherchais !Je comprend bien le principe, cependant je ne comprend pas comment le hover s’effectue étant donné qu’il n’y a pas de fonction hover dans l’exemple. J’ai donc essayé de mettre une fonction hover qui change l’opacité sur la class hide comme dans l’exemple, mais tous les hover se font en même temps. Une idée d’où ça pourrai venir?

    Merci!

    1. Tim voici pour le hover :

      jQuery(« .wrap »).on({
      mouseover: function() {
      jQuery(« .hide », this).stop().fadeTo(300, 1.0); // on définit le hover à 100%
      },
      mouseout: function() {
      jQuery(« .hide », this).stop().fadeTo(300, 0); // on définit le hover à 100%
      }
      });

    1. Hmmmmm Guillaume, on est d’accord que tu es sous un wordpress autohébergé.
      Si c’est le cas wordpress charge déjà pour nous jquery et certaines librairies de jQuery UI.

      Il ne te reste donc qu’à charger le fichier javascript qui contient ta fonction. On peut l’appeler mesfonctions.js

      A placer en fin de document juste avant la balise </ body>
      pour que la page charge plus vite

      < script type= »text/javascript » src= »ton-dossier-js/mesfonctions.js »></script>

      Dans mesfonctions.js, on écrit le code nécessaire à notre animation

      $(document).ready(function(){
      // et ici le code donné dans l’article
      });

      Pour plus d’info sur jQuery tu peux aller voir ce tuto : http://www.yoja-web.com/fr/javascript/jquery-guide-demarrage/debuter-jquery

      1. Merci pour ta réponse rapide mais je n’arrive pas a le faire marcher.
        j’ai mis l’importation du script à la fin dans le footer.php juste devant le mais ça ne marche pas…
        merci d’avance

        1. J’ai installer le theme Snapshot de SiteOrigin. et j’ai la partie blog et catégorie qui me font un mousehover avec le titre et la description. et je voudrais la même chose pour les thumbnail de mes galeries.
          merci :)

          1. Je suppose que ce thème utilise jquery. Si c’est le cas tu n’as plus qu’à intégrer la fonction pour la galerie sauf si le thème à déjà prévu des modifications sur les galeries. Il faudrait que tu jettes un coup d’oeil dans lme fichier function.php du thème.

  2. salut !
    en fait je rencontre le même problème que guillaume : je ne vois pas ou placer les différents éléments de code que tu fournis (merci, par ailleurs). j’ai suivi les instructions que tu donnes, mais il ne se passe rien. j’utilise le thème « responsive », ainsi que l’extension « jetpack », peux tu m’indiquer sur quel fichier placer le code :
    /* pour commencer, ajoutons la classe wrap à chaque liste de définitions. Cette class permettra aux listes d’avoir des positions « relative » afin que notre futur div .hide, qui contient notre texte, puisse être positionné au-dessus des images car en position « absolute » */

    jQuery(« .gallery-item »).addClass(« wrap »);

    // puis attachons un gestinnaire d’évènement à la class wrap

    jQuery(« .wrap »).on({
    mouseover: function() {
    jQuery(« .hide », this).stop().fadeTo(300, 1.0); // on définit le hover à 100%
    },
    mouseout: function() {
    jQuery(« .hide », this).stop().fadeTo(300, 0); // on définit le hover à 100%
    }
    });

    //.puis nous ajoutons notre div .hide : après .gallery-icon

    jQuery(« .gallery .gallery-item .gallery-icon »).append( »);

    // puis nous créons un h3 dans le .hide

    jQuery(« .gallery .gallery-item .gallery-icon .hide »).wrapInner( »);

    // puis nous copions le title dans le h3 en le recopiant depuis la balise title de l’image

    jQuery(« .gallery .gallery-item .gallery-icon »).each(function (index) {
    var leTitre = jQuery(this).find(« .attachment-thumbnail »).attr(‘alt’);
    jQuery(this).find(« .hide h3 »).text(leTitre);

    et comment le faire fonctionner sur la galerie par défaut de wordpress ?
    d’avance merci pour ton aide,

    1. Jerem, j’ai mis à jours mon article avec beaucoup de précisions pour que ce soit plus facile.

      J’indique comment charger le fichier javascript et où intégrer le code js et css.

Répondre à Niums Annuler la réponse

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *