Une catégorie par image ( wordpress )

Estillia
Javascript

Bonjour à tous !
J'ai une liste d'images en front derrière lesquelles une catégorie par image se cache.
J'ai donc une liste d'images comme suit :

<div class="scroll">
                <img alt="Jeux vidéos" class="masterTooltip" title="Jeux vidéos" src="http://.png" >
                <img alt="Cuisine" class="masterTooltip" title="Cuisine" src="http://.png" />
                <img alt="Contact" class="masterTooltip" title="Contact" src="http://.png" />
                <img alt="Beauté" class="masterTooltip" title="Beauté" src="http://.png" />
                <img alt="Maquillage" class="masterTooltip" title="Maquillage" src="http://.png" />
                <img alt="Cheveux" class="masterTooltip" title="Cheveux" src="http://.png" />

            </div>

J'utilise une fonction wordpress pour ouvrir une catégorie :

$category_id = get_cat_ID( 'Category Name' );
get_category_link( $category_id )

Ici, le nom de la catégorie, c'est l'alt de mes images. J'ai donc codé un truc pour récupérer l'alt et le mettre en category_id, mais j'ai du oublier qq chose, en même temps, mon niveau est assez limité. 

$('.masterTooltip').click(function(){
            var alt = $(this).attr('alt');
            var category_link = get_category_link( 'get_cat_ID(alt)');
            window.open(category_link,'','');
            return false;
        });
    });

En clair, quand je clic sur une image, la catégorie associée est sensée s'ouvrir, et ça n'est pas le cas. Une idée ?

Merci d'avance !

10 réponses

Vallyan
Réponse acceptée

Ben a priori ca marcherait ton truc mais je croyais que tu voulais pas de lien <a>.
Les options sans lien que tu as sont:

  • Soit tu mets le lien dans un attribut de ton image (data-link, par exemple), et tu utilises cette info dans ton JS pour ouvrir ta fenetre

  • Soit le lien contient le nom de la catégorie (et non une id quelconque, par ex ... je connais pas wordpress), et dans ce cas c'est facile: dans ton JS tu fais un truc du genre:

    $("img.mastertooltip").click(function(e){
    e.preventDefault();
    window.open( "http://le.lien-vers-ta-categorie/" + $(this).attr('alt') ); // A changer pour coller au format de ton lien
    });

Vallyan 
get_category_link( $category_id )

Ca c'est du PHP (serveur) 

var category_link = get_category_link( 'get_cat_ID(alt)');

Ca c'est du JS (client)

Pourquoi ne pas faire simplement un lien avec une image dedans: 

<a href="whatever"><img /></a>
Estillia
Auteur

Alors en fait, j'ai déjà essayé d'entourer mes images de liens, mais ça fait déconner l'autre fonction que j'ai pour mes images ( pour les faire défiler en boucle horizontalement ).
J'ai donc pensé à le faire en js plutôt qu'entourer mes images. Sauf si tu as une autre solution :)

Pour mon code, comment j'intègre une fonction php wordpress dans mon js ?

Vallyan

donne moi le lien que tu utiliserais pour afficher ta page catégorie

Vallyan

Pas besoin en fait (tu as plusieurs options pour le faire ...).

Lorsque, coté backend, tu construis ta liste d'images, tu peux rajouter ajouter un attribut data-link="get_category_link( $category_id )" a tes tags <img />

Puis dans ton JS fais un truc du style:

$("img.mastertooltip").click(function(e){
    e.preventDefault();
    window.open( $(this).attr("data-link") );
});
Vallyan

Evidement data-link="" doit etre un vrai lien, généré par php ... pas la fonction php elle-meme ^^

Estillia
Auteur

En adaptant, ça donnerait ça :

$cat_id_game = get_cat_ID('Jeux vidéos');
                $category_link_game = get_category_link( $cat_id_game ); ?>
                <a href=<?php echo esc_url( $category_link_game ); ?> >
                    <img alt="Jeux vidéos" class="masterTooltip" title="Jeux vidéos" src="http://localhost/axou/wp-content/themes/Axou/images/space-invider.png" />
                </a>

Mais là je dois déclarer 2 variables pour chaque lien, c'est pas l'idéal, sachant que l'alt des images correspond au nom de la catégorie

Estillia
Auteur

Ok, cette solution me convient parfaitement, il faudrait juste ouvrir le lien dans la même fenêtre, là ça ouvre un autre onglet. ( oui oui je suis vraiment pas bon ^^ )

Vallyan

OK, nickel.

Pour ouvrir dans la meme page, il suffit d'utiliser

window.location.assign( "http://www.google.com" )

plutot que 

window.open( "www.google.com" );

Bonne continuation !

Estillia
Auteur

Merci beaucoup pour ton aide !
Avec tout ça, je dormirai moins bête ce soir :)

J'ai tenté de combiner un peu tout ce que tu m'as donné, je pense que je vais rester simple, je cherche trop la perfection ^^
( oui j'ai tenté $(this).attr('data-link') + $(this).attr('alt') avec la fonction php en data-link, sauf que la fonction prend un argument, ( l'alt ) et je sais pas le mettre, donc je fais comme ça ^^ )