Une catégorie par image ( wordpress )

Par Estillia, il y a 12 ans

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, il y a 12 ans 
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, il y a 12 ans

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, il y a 12 ans

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

Vallyan, il y a 12 ans

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, il y a 12 ans

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

Estillia, il y a 12 ans

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

Vallyan, il y a 12 ans

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
    });

Estillia, il y a 12 ans

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, il y a 12 ans

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, il y a 12 ans

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 ^^ )