Tagged: 

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • February 19, 2019 at 2:35 pm #1068983
    Daniel

    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!

    February 20, 2019 at 12:34 am #1069206
    Jordan Shannon

    Hey Daniel,

    Add this to quick css:

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

    Best regards,
    Jordan Shannon

    February 20, 2019 at 11:03 am #1069392
    Daniel

    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?

    February 21, 2019 at 7:49 pm #1070076
    Jordan Shannon

    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

    February 23, 2019 at 8:54 pm #1070792
    Daniel

    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!

    February 25, 2019 at 1:04 am #1071064
    Jordan Shannon

    Hi,

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

    Best regards,
    Jordan Shannon

    February 25, 2019 at 9:45 am #1071164
    Daniel

    HI Jordan,

    see the private section. Thanks!

    February 27, 2019 at 6:15 pm #1072324
    Jordan Shannon

    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.avia-gallery-big-crop-thumb').removeAttr('href');
   });
</script>
<?php
}
add_action('wp_head', 'custom_script_name');

    Best regards,
    Jordan Shannon

    February 28, 2019 at 12:54 pm #1072621
    Daniel

    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!

    March 4, 2019 at 8:14 am #1074223
    Ismael

    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

    March 4, 2019 at 10:54 am #1074277
    Daniel

    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.

    March 5, 2019 at 5:35 am #1074655
    Ismael

    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

    March 5, 2019 at 10:20 am #1074756
    Daniel

    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

    March 6, 2019 at 5:11 am #1075253
    Ismael

    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

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.