Tagged: ,

Viewing 3 posts - 1 through 3 (of 3 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');
  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.