[Resolved] Change my logos with buttom Menu

[Benjamin]

Hello Tom
How can I do with the Hooks so that when I click on a button in my menu I change my logos
For example I press on my menu the button “Red”

<div class="grid-25" style=" padding: 0 25px;">
 <a href="#" target="_self"> 
   <img src="URL-ONE" alt="" />
 </a>
</div>

<div class="grid-25" style=" padding: 0 25px;">
 <a href="#" target="_self"> 
   <img src="URL-TWO" alt="" />
 </a>
</div>

then I press the “Blue” button

<div class="grid-25" style=" padding: 0 25px;">
 <a href="#" target="_self"> 
   <img src="URL-three" alt="" />
 </a>
</div>

<div class="grid-25" style=" padding: 0 25px;">
 <a href="#" target="_self"> 
   <img src="URL-four" alt="" />
 </a>
</div>

It’s similar to polylang but I do not want to change language

but that the logos do not change if it is not re-tightened in one of them

[Tom]

Hi there,

I’m not too sure what you mean. I assume this change would have to stick when you navigate page to page? So if you click on “Blue” the blue logo would stay visible as you navigate through the site unless you clicked “Red”?

[Benjamin]

Hi TOM.

That’s right, just change the logo when the button is pressed

[Tom]

If you need it to remember which option they clicked, you would likely need to integrate a cookie solution, along with javascript in order to switch the logo out. This is quite a bit of customization, but if there’s an example you can link me to, I might be able to help. Usually this stuff is a little out of scope for the forum though.

If you don’t need it to remember, the solution is much easier.

[Benjamin]

How would it be without recording?

thanks for the quick response

[Tom]

Without it needing to be remembered, you could do something like this:

jQuery( document ).ready( function($) {
    $( '.red-button' ).on( 'click', function() {
        $( '.site-logo img' ).attr( 'src', 'URL TO RED LOGO' );
    } );

    $( '.blue-button' ).on( 'click', function() {
        $( '.site-logo img' ).attr( 'src', 'URL TO BLUE LOGO' );
    } );
} );

Of course, you’d need to update the red-button and blue-button classes.

[Benjamin]

Hello Tom
I did something similar but with $ (window) .load
But your solution is better, thanks for the support of a genius!
and to remember I used

$(document).ready(function(){
//console.log('img', localStorage.getItem('img'));
 if(localStorage != null && typeof localStorage.getItem('wlanguage') != "undefined"){

   if(localStorage.getItem('img') == 'red'){
      pictureChange(1);

   }else if(localStorage.getItem('img') == 'blue'){
     pictureChange(2);
   
   }else{
      pictureChange(1);
   }

}

and works

Thank you so much

[Tom]

Glad I could help! 🙂

[Author]

Posts