Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1068983

    Hi,

    I’m using a portfolio grid on ca 50 pages with the Link handling option set to ‘Open a preview of the entry (known as AJAX portfolio)’. This works exactly as intended: when I click on an image or title in the portfolio grid, the images enlarges and there is text from the portfolio item next to the image. In this view however, I can again click on 1) the enlarged image and 2) all the thumbnails below this image. Those images open in a lightbox when clicked.

    What I want is to disable the option that the enlarged image and thumbnails can be clicked. I tried to use .pointer-events: none; but I can’t find the correct CSS to apply it to.

    Can you help me with that? Thanks!

    #1069206

    Hey Daniel,

    Add this to quick css:

    .portfolio-details-inner .avia-gallery a{
    pointer-events: none!important;
    }

    Best regards,
    Jordan Shannon

    #1069392

    HI Jordan,

    Thanks! That is indeed the right CSS and it’s working. Unfortunately the pointer-events CSS also disables hover, making it unusable for this situation. I didn’t know that until now. Is there another CSS you advise that only disables the linking?

    #1070076

    Hi,

    Add this to functions.php:

    /**
     * Remove image links from WooCommerce thumbnail images
     *
     */
    
    add_filter('woocommerce_single_product_image_thumbnail_html','wc_remove_link_on_thumbnails' );
     
    function wc_remove_link_on_thumbnails( $html ) {
         return strip_tags( $html,'<div><img>' );
    }

    Best regards,
    Jordan Shannon

    #1070792

    Hi Jordan,

    I’ve added this to functions.php but that’s not doing anything. I’m also not using WooCommerce. Hope you can help.

    Thanks!

    #1071064

    Hi,

    Please provide admin info so we can log in and look into this issue further.

    Best regards,
    Jordan Shannon

    #1071164

    HI Jordan,

    see the private section. Thanks!

    #1072324

    Hi,

    Apologies for the delay. The following should work in the functions.php file:

    function custom_script_name(){
    ?>
    <script>
     jQuery(document).ready(function(){
    	jQuery('a.avia-gallery-big.fakeLightbox.lightbox. (Purchase code hidden if logged out) ').removeAttr('href');
       });
    </script>
    <?php
    }
    add_action('wp_head', 'custom_script_name');

    Best regards,
    Jordan Shannon

    #1072621

    Hi Jordan,

    Thanks for your reply. I’ve added the code to the functions.php of my child theme, but there is no change. I’ve added FTP details below so you can check my functions.php in /wp-content/themes/enfold-child/functions.php You can also alter the code in my functions.php to make it work.

    Thanks for helping!

    #1074223

    Hi,

    Thanks for the update.

    We put this code in the Quick CSS field to disable the links of the portfolio gallery.

    .av_table_col.first.portfolio-preview-image a {
        pointer-events: none;
    }

    Best regards,
    Ismael

    #1074277

    Hi Ismael,

    Thanks for that. The problem now though is that the hover function is also disabled, which means that the thumbnails don’t enlarge when you hover over them.

    #1074655

    Hi,

    I see. We can disable the lightbox, but users will still be able to click on those thumbnails and open the image on a new tab. If you’d like to try it, edit the js > avia-snippet-lightbox.js file, look for this code around line 130:

    groups			:	['.avia-slideshow', '.avia-gallery', '.av-horizontal-gallery', '.av-instagram-pics', '.portfolio-preview-image a', '.portfolio-preview-content', '.isotope', '.post-entry', '.sidebar', '#main', '.main_menu', '.woocommerce-product-gallery'], 
    

    Remove the portfolio preview selector:

    groups			:	['.avia-slideshow', '.avia-gallery', '.av-horizontal-gallery', '.av-instagram-pics', '.portfolio-preview-content', '.isotope', '.post-entry', '.sidebar', '#main', '.main_menu', '.woocommerce-product-gallery'], 
    

    And then exclude it from the lightbox script by adding the selector on line 133:

    exclude			:	'.noLightbox, .noLightbox a, .fakeLightbox, .lightbox-added, a[href*="dropbox.com"]',
    

    Replace it with:

    exclude			:	'.noLightbox, .noLightbox a, .fakeLightbox, .lightbox-added, a[href*="dropbox.com"], .portfolio-preview-image a',
    

    Best regards,
    Ismael

    #1074756

    Hi Ismael,

    Thanks; I’ve tried it and that’s indeed not what I’m looking for. Can we instead remove the link in the portfolio grid file? Is that gallery.js?

    Regards,
    Daniel

    #1075253

    Hi,

    It’s in the config-templatebuilder > avia-shortcodes > gallery > gallery.php file. Look for this code around line 350.

    $thumbs .= " <a href='".$link[0]."' data-rel='gallery-".self::$gallery."' data-prev-img='".$prev[0]."' {$class} data-onclick='{$counter}' title='".$description."' $markup_url><img {$tooltip} src='".$img[0]."' width='".$img[1]."' height='".$img[2]."'  title='".$title."' alt='".$alt."' /></a>";
    

    You need to remove the href attribute and probably change the link tag to a div or something else.
    If you want to remove the lightbox class attribute, look for this line:

    $imagelink = 'lightbox';
    

    .. and replace it with:

    $imagelink = '';
    

    Best regards,
    Ismael

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

You must be logged in to reply to this topic.