Image linking and lightbox

I'm having one problem that i can't solve for quite some time. I'm building a portfolio site using Expositio theme. I need all pictures to open in lightbox when clicked, but instead of that, when I click on image it takes me to media file in new tab. I can see lightbox working for one second and then it jumps on link of the uplaoded image (http://localhost/wordpress/wp-content/uploads/2017/05/otherwork1d.jpg)

I need to disable so the lightbox would be visible. If anyone could help I would be most grateful.

Dule.

Topic lightbox images links Wordpress

Category Web


So, the problem is that on Expositio theme they are adding some jQuery code to all links, that if you're not closing the mobile menu, after a configurable number of seconds (1 second by default) just redirect site to the link url.

If you go to line 260 of js/functions.js you find this:

$('a').on('click', function(e) {
    e.preventDefault();
    var _this = $(this);
    // close mobile menu if it's open, redirect otherwise
    if (_body.hasClass('toggled-on') && _this.parents('#page').length == 1
        && _this.parents('#primary-navigation').length == 0
    ) {
        load_effect.menuOff();
    } else {
        load_effect.loader.show();
        var href = $(this).attr('href');
        $('.site').css('opacity', 0);
        setTimeout(function() {
            window.location = href;
        }, load_effect.duration);
    }
});

I think the best solution would be to create a child theme, dequeue that script and enqueue a copy of the script without that redirect:

<?php
// hook in late to make sure the parent theme's registration 
// has fired so you can undo it. Otherwise the parent will simply
// enqueue its script anyway.
add_action('wp_enqueue_scripts', 'override_functions_script', 100);
function override_functions_script()
{
    wp_dequeue_script('expositio-script');
    wp_enqueue_script('child-expositio-script', get_stylesheet_directory_uri().'/js/functions.js', array('jquery'));
}

And on your child functions.js, you could only redirect page if the link doesn't have fancybox class:

$('a').on('click', function(e) {
    e.preventDefault();
    var _this = $(this);
    // close mobile menu if it's open, redirect otherwise
    if (_body.hasClass('toggled-on') && _this.parents('#page').length == 1
        && _this.parents('#primary-navigation').length == 0
    ) {
        load_effect.menuOff();
    } else {
        load_effect.loader.show();
        var href = $(this).attr('href');
        $('.site').css('opacity', 0);
        if(!_this.hasClass('fancybox')) {  // only redirect if it doesn't have fancybox class
            setTimeout(function() {
                window.location = href;
            }, load_effect.duration);
        }
    }
});

Also, it would be good to report that to theme developer as they shouldn't have that code on a so generic rule.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.