Tagged: ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • November 14, 2024 at 10:12 pm #1471340
    bb

    I’m using the lightbox modal window on the site, but I have one specific case where we need to modify the function slightly. We are using an icon to open images in the lightbox and in that case we don’t want the arrows that click through other images on the page. Just want to open the one image and then close it.
    We are using the arrows in other cases so we can’t disable it globally.

    Is there a code snippet, or a specific class that we could use to disable the arrows selectively?

    Thanks!

    November 15, 2024 at 7:11 am #1471362
    Ismael

    Hey bb,

    Thank you for the inquiry.

    Try editing the Icon element and apply a Custom CSS Class (e.g., av-popup-no-nav) in the Advanced > Developer Settings toggle. Then, add this code to the functions.php file:

    function ava_popup_init() { ?>
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('.av-popup-no-nav, .av-popup-no-nav a').magnificPopup({
        type: 'image',
        midClick: true, // Allow opening popup on middle mouse click
        navigation: {
            next: false, // Disable next arrow
            prev: false  // Disable prev arrow
        }
    });
});
</script>
<?php }

add_action('wp_head', 'ava_popup_init');

    Best regards,
    Ismael

    November 15, 2024 at 11:17 am #1471395
    Guenni007

    or just set the gallery in ismaels snippet to false:
    gallery: { enabled: false},

    function ava_popup_init() { ?>
<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('.av-popup-no-nav, .av-popup-no-nav a').magnificPopup({
        type: 'image',
        midClick: true, // Allow opening popup on middle mouse click
        gallery: { enabled: false},
    });
});
</script>
<?php }
add_action('wp_head', 'ava_popup_init');
    November 21, 2024 at 12:01 am #1471805
    bb

    Thanks so much for the replies. However, both of these yield the opposite result: instead of removing the arrows, it keeps the arrows and loads text that says “the image cannot be loaded”.

    November 23, 2024 at 10:54 pm #1472048
    Mike

    Hi,
    As I understand, when clicking on the Camera icons on your single product pages, the lightbox opens with the arrows to the next image, and clicking the image will show the next image. Both of these you want to remove.
    So try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

    .single-products .mfp-gallery .mfp-arrow {
	display: none;
}
.single-products .mfp-gallery .mfp-content .mfp-img {
	pointer-events: none;
}

    After applying the css, please clear your browser cache and check.

    Best regards,
    Mike

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