Tagged: ,

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

    Hey there,

    I have a two-sided platform with 1) a restricted area with 100+ pages where I DON’T want the lightbox to appear because I have NEXTGEN (the lightbox comes up behind NEXTGEN and 2) the non-restricted surrounding pages where I WANT the lightbox to appear (aint using nextgen here)

    Is there a smart way to go about this?

    I have read similar posts like this:

    But the solution is excluding certain ones, which will be a very long piece of code, plus very inflexible as I’ll add a lot of new pages every week, and would have to edit the code each time.

    So, do you see any other solution that fit my setup :) ?

    Thank you!

    Best regards


    i suppose this was a topic i’m interested too in a former installation – look here – this was the solution Josue gave me:




    Please refer to @guenni007‘s post
    @guenni007 thanks as always :)




    Thank you for contributing to the post.

    But, that solution still requires me to write every single instance of page ID into the code, and every time I add a new page. Or am I missing something? Is there no less manual way to go about it?



    Please turn on custom CSS field for ALB elements – http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and give your elements a custom CSS class and then go to Enfold/js/avia.js and find

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

    and change it to

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

    That should disable lightbox on your elements with that custom class.



    Sounds good!

    Though, Nextgen Gallery elements are shortcodes and not Enfold elements, so enabling the custom css field, won’t really affect them I assume?

    Then it would require me to know what “elements” of NextGen Gallery should be excluded and their class?

    Or perhaps – can you apply it to, say, a Color Section and it will affect every sub-element such as a NextGen shortcode?



    You can apply custom CSS class to all elements including color section and column elements :)



    does he want pointer-events: none ?

    i thought he wants a normal link not a lightbox



    He would like to disable Enfold’s lightbox on his pages where he uses Nextgen



    Applying a color section a custom class, does that affect the NextGen shortcode inside it? It’s not like I want to disable lightbox from the color section itself, only its children/content/elements



    Applying a custom class to color section and then editing avia.js will disable Enfold’s lightbox from that color section and it’s content.
    Please try firstly.



    I’ve been looking for a solution to exclude the featured image from the lightbox (either across the whole site or on particular pages). However, I cannot disable it completely per page as other elements below featured image require it.

    I have done a fair amount of search and reading here in the forums and found what I thought would be the solution in editing avia.js as shown above and enqueueing in child theme. However, I noticed that the featured image link already has class .lightbox-added. Seems to me that section isn’t working as it should. Ideas?

    • This reply was modified 4 years, 1 month ago by  livengrin.


    Have you referred to my post here – https://kriesi.at/support/topic/disable-lightbox-on-many-pages-allow-for-certain/#post-587737

    If you are using a child theme, please add following code to Functions.php file of your child theme

    function wp_change_aviajs() {
       wp_dequeue_script( 'avia-default' );
       wp_enqueue_script( 'avia-default-child', get_stylesheet_directory_uri().'/js/avia.js', array('jquery'), 2, true );
    add_action( 'wp_print_scripts', 'wp_change_aviajs', 100 );

    and move modified file inside /js folder



    Thanks for your response. I have implemented the solution above. My understanding of the code was that everything with a class included in that ‘exclude:’ section of avia.js should not be lightboxed. If this is true, then why were elements such as the ‘.big-preview.single-big a’, which have a class of .lightbox-added, appearing in the lightbox. I ultimately solved the issue by using a page specific class coupled with that exact element and then removing the pointer events for same in css.


    exclude: ‘.postid-9000 .big-preview.single-big a, .my-test-class, .noLightbox, .noLightbox a, .fakeLightbox, .lightbox-added, a[href*=”dropbox.com”]’,

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

The topic ‘Disable lightbox on many pages / allow for certain’ is closed to new replies.