Disable Lightbox Effect on Images

  • Resolved kamalh

    (@kamalh)


    5 years, 3 months ago

    How do I disable lightbox effect from images in a post.

    I have noticed that the effect is active only on bigger images and not the smaller ones. But I would like to disable the effect altogether. I don’t want the image to be clickable.

    Thank you.

    The page I need help with: [log in to see the link]

Viewing 15 replies - 1 through 15 (of 18 total)

  • @kamalh You can add the following to your themes functions.php file to disable the lightbox effect:

    function wp_body_classes( $classes )
{
    $classes[] = '" data-amp-auto-lightbox-disable ';
    return $classes;
}
add_filter( 'body_class','wp_body_classes', 999 );

    Just as with lazy loading the lightbox effect is part of any valid AMP document, you can find out more about how it works here.

    Thread Starter kamalh

    (@kamalh)

    @jamesosborne I added that code and the lightbox effect still happens on the images.

    As mentioned, it only happens on the bigger images and not the smaller ones.

    @kamalh You can add the attribute data-amp-auto-lightbox-disable to any image to disable the lightbox effect. The best approach may be to modify your template to add the attribute. If you send me an example of one of the images I can take a look.

    Thread Starter kamalh

    (@kamalh)

    Hi @jamesosborne you can check out this post:

    https://dailytechie.com/ather-enters-the-next-phase-of-expansion-signs-mou-with-tn-government-for-a-new-factory-in-hosur

    I have already added the code:

    function wp_body_classes( $classes )
{
    $classes[] = '" data-amp-auto-lightbox-disable ';
    return $classes;
}
add_filter( 'body_class','wp_body_classes', 999 );

    But the lightbox effect still happens.

    I would like to use this code:

    data-amp-auto-lightbox-disable

    But I do not want to do it manually for every image. Can you please help me guide where I can add the attribute on a sitewide level, so the lightbox effect is disabled.

    Thank you for your prompt replies.

    @kamalh As opposed to the previous function can you add the required attribute data-amp-auto-lightbox-disable to the <body> tag within your active theme, preferably via a child theme? That should disable the lightbox effect across all images

    Thread Starter kamalh

    (@kamalh)

    Hi @jamesosborne

    That didn’t work either. I’ll just let it be for now. Cos nothing seems to be working.

    @kamalh If you want to share your site I can take a look for you and assist further?

    Thread Starter kamalh

    (@kamalh)

    That’s really kind of you @jamesosborne

    The site I have already mentioned: https://dailytechie.com/

    Would you like access to the backend? Please let me know I’ll definitely share it with you.

    @kamalh We are unable to login to others sites unfortunately. But if you follow the guidelines on this GitHub page you can see the code you can place within the <body> tag of your theme, which should resolve your issue.

    Thread Starter kamalh

    (@kamalh)

    @jamesosborne It’s ok I’ll try to resolve it.

    But the link you’ve mentioned is not working.

    @kamalh Apologies, the correct link is here. Refer to the section below the "Or to disable it for your entire document altogether"

    Once you place that code into your site I can check.

    Thread Starter kamalh

    (@kamalh)

    I have pasted the code. But I think it is not disabled still:

    https://dailytechie.com/ust-global-targets-further-expansion-in-apac-with-the-opening-of-a-new-singapore-office

    @kamalh I don’t see the required code between your body tag. I can check again after you’ve added the following:
    data-amp-auto-lightbox-disable

    Thread Starter kamalh

    (@kamalh)

    Hi @jamesosborne

    Sorry for the late reply.

    What I did was updated that small bit of code under header/footer scripts off the genesis theme.

    Screenshot: https://imgur.com/UYdB3Is

    I have removed it now. Can you please tell me which file should I edit in order to place this code: data-amp-auto-lightbox-disable

    I am using the Genesis framework with the eleven40 theme.

    @kamalh Have you attempted adding the data-amp-auto-lightbox-disable attribute between the body tag? I don’t see the code added to your site.

    I checked for a suitable Genesis filter and it looks like you can use the below:

    add_filter( 'genesis_attr_body', 'genesis_body_add_attrubute' );
function genesis_body_add_attrubute( $attributes ) {
 $attributes[''] .= ' data-amp-auto-lightbox-disable';
 return $attributes;
}

    Can you add that to your themes functions and let me know if it works?

Viewing 15 replies - 1 through 15 (of 18 total)
  • The topic ‘Disable Lightbox Effect on Images’ is closed to new replies.