Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #381283

    Hi,
    I wonder, is it possible to change the action in image gallery from mouseover to click? What I want is to keep the Tooltip when mouseover at thumbnails however I want the bigger image to change on top with a click and not with mousover. Sorry for my bad english.

    #382049

    Hi vonhektor!

    Open up /enfold/js/shortcodes.js and change line 2287 from this.

    gallery.on('mouseenter','.avia-gallery-thumb a', function()
    

    To this.

    gallery.on('click','.avia-gallery-thumb a', function()
    

    Regards,
    Elliott

    #384294

    great thanks alot! just a “make sure” question: do i have to copy that directory & file into the child-theme to be permanently applied? I meen I work with the child theme.

    #384486

    Hi!

    Yes, please move modified file to your child theme to the same path and then please add following code to Functions.php file of your child theme

    function wp_change_shortcodesjs() {
       wp_dequeue_script( 'avia-default' );
       wp_enqueue_script( 'avia-default-child', get_stylesheet_directory_uri().'/js/shortcodes.js', array('jquery'), 2, true );
    }
    add_action( 'wp_print_scripts', 'wp_change_shortcodesjs', 100 );

    Best regards,
    Yigit

    • This reply was modified 5 years, 2 months ago by  Yigit.
    #384514

    thanks alot, will try this out. It looks like as it is a general code to enqueue the avia.js file from the parent theme. would that mean that I can also do other changes in that script (I actually did) and with your code above I ensure it will be loaded and never overwritten by a theme update? If I have to specify my changes (from avia.js) in the child-function.php, I better take a course on it. but maybe that’s it? anyhow thanks so much for your help and i can really understand when some user write you are a hero. ;)

    #384518

    Hey!

    I edited the code and changed the function name but yes, you can adjust the code and change it to following

    function wp_change_aviajs() {
       wp_dequeue_script( 'avia-default' );
       wp_enqueue_script( 'avia-default-child', get_stylesheet_directory_uri().'/js/avia.js', array('jquery'), 2, true );
    }
    add_action( 'wp_print_scripts', 'wp_change_aviajs', 100 );

    to load avia.js file from your child theme :)

    Regards,
    Yigit

    #384715

    All right, I could have you misunderstood because with my changes all images disappear (mansory and easy slider). I used another way of showing the images but in general I would like to know about that option and how to set it up to work:
    When you say: “to load avia.js file from your child theme ” do you mean I have to copy that file with the changed code into the Child Theme Folder? Or should I leave the avia.js file in the parent directory as the child function.php tells it how to deal with the changes? If I do that the images in mansory and easy slider disappear as mentioned. Sorry I am not into php and in which direction the code is working. so I’d very happy if you can help once more please. Thanks alot!

    #385314

    Hey!

    You need to create a js folder inside the child theme directory then place the modified avia.js file inside. This means that update can break the theme if there is a significant changes on the avia.js scripts.

    Regards,
    Ismael

    #385334

    thanks for your patience! it perfectly worked for my avia.js and shortcodes.js! so this issue is resolved.
    However I have got one suggestion for the gallery that works with thumbnails and a bigger picture above. one of my clients did not choose that gallery style as the thumbs do not grow in size when the screen gets smaller. so if it behaves similar to the mansory thumbnails, being responsive to the screen, it might be more attractive for using it. what do you think?

    #386875

    Hi!

    You can change the gallery thumbnail column size on mobile view using media queries. For example, set the Gallery Columns to 6. Add this on Quick CSS to adjust the size of the thumbnail columns on mobile view:

    @media only screen and (max-width: 767px) {
    #top #wrap_all .avia-gallery-1 .avia-gallery-thumb a {
    width: 25%;
    }
    }

    Best regards,
    Ismael

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.