[Resolved] Change my logos with buttom Menu

Home Forums Support [Resolved] Change my logos with buttom Menu

Home Forums Support Change my logos with buttom Menu

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #658439
    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

    GeneratePress 2.1.4
    GP Premium 1.7.2
    #658458
    Tom
    Lead Developer
    Lead Developer

    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”?

    #658467
    Benjamin

    Hi TOM.

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

    #658523
    Tom
    Lead Developer
    Lead Developer

    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.

    #658541
    Benjamin

    How would it be without recording?

    thanks for the quick response

    #659006
    Tom
    Lead Developer
    Lead Developer

    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.

    #659191
    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

    #659453
    Tom
    Lead Developer
    Lead Developer
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.