By default, Easy FancyBox tries to detect all media links and bind itself to them so that each image is opened in a light box. This works well for most sites but sometimes you might want to limit the Easy FancyBox light box effect to media links within certain parts of the page only.

For example: when there is another light box that handles stand alone images, you may wish Easy FancyBox to bind itself only to image links within Gallery blocks. Or if you have media links in your sidebar or footer that you wish to not open in FancyBox.

There are two ways to get this done: either by excluding certain files, sections or links, or by limiting the auto-detection to certain sections or links.

Excluding from auto-detection

Links or sections

All links with class nolightbox and nofancybox that would normally get auto-detected, will be excluded from opening in a FancyBox overlay.

Manually adding this class to a link inside a page or post paragraph involves switching the paragraph block edit mode to “Edit as HTML” under the three-dots block item menu. You can then find the link and add the attribute class="nolightbox" like this:

<p>Paragraph texte with an embedded image <a href="url/to/fullimg.jpg" class="nolightbox"><img src="url.to/thumbnail.jpg" /></a> or other <a href="url.to/file.pdf" class="nolightbox">media link</a>.</p>

Tip: if you wish to disable FancyBox but still allow another light box, try using the class nofancybox instead!

Since Easy FancyBox version 1.9, this class can be applied to a whole block like a Group, Slider or Gallery, under the Advanced section in the Block settings tab (on the right). Just enter the class in the Additional CSS class(es) field and all media links inside that block (can be an entire Group section block, containing many other blocks) will be ignored by Easy FancyBox.

Note: If you give a link both a nolightbox and a dedicated class like fancybox-iframe then that link will open in FancBox in iframe mode. This can be useful to “override” auto-detection and force FancyBox to open in a particular mode.

File types

By default, each activated media file type on Settings > Media will have the option Autodetect switched on.

Images

The media type Images has a field Autodetect with .jpg .jpeg .png .webp entered. This works for most sites but you can either remove or add other file types by their extension (including te dot) or any other recognizable URL part. For example: Facebook or Flickr image URLs can be recognized by their common ending in _o.jpg or even _o/ (without file extension)

Other media types

Autodetect for all other media types (except Iframe, which has no autodetect) can be switched off by disabling the check box in each section. Each section description will tell you which dedicated class is available to activate FancyBox on individual media links.

[Pro] Limiting auto-detection to links or sections

In the free Easy FancyBox plugin, the Images Autodetect option (field with file extensions or other recognizable URL parts, see above) is applied to “All image links”. But with the Easy FancyBox Pro extension, you’ll get an extra option: “Links inside Section(s)”

This pro option give you a way to fine-tune the Autodetect to certain parts of the page, which can be defined in the field Section(s) just below there under Gallery.

Note: when setting both “Apply to: Links inside Section(s)” and “Autogallery: Links inside Section(s)”, the Sections field will apply to both Autodetect and Autogallery at the same time!

After installation of the plugin, that field will contain article, div.hentry which basically tries to accommodate for most themes out there where post and page content is either wrapped in an HTML5 <article> tag, or a traditional <div> tag with class “hentry”.

This default setting already excludes sidebars, footer and menu links.

Example: Galleries

But let’s say, for example, that you wish to limit the auto-detection even further to galleries only. Depending on your use of plugins for galleries (or no plugins) the classes set in the Section(s) field must be different. Some commonly used gallery classes are:

WP version / Plugin	Class
WordPress 4.9 or older	.gallery
WordPress 5.0 and later	.wp-block-gallery
WP 5+ w/ Jetpack (Tiled Galleries)	.wp-block-gallery, .wp-block-jetpack-tiled-gallery
Visual Composer	.vc_grid
WPBakery	.wpb_image_grid
NextGEN Pro	.nextgen_pro_thumbnail_grid

If you have another plugin that does your galleries, try to find out which common class name you can use to target them. Go to a page or post where there is a gallery and view it on the front end (public side), then right-click on the gallery’s first image and choose “View source…”

This will open the developer toolbar in your browser and show you the source code, nicely structured, with the fist image thumbnail (and its link) in view. Look a little higher to see the wrapping div element. Use the mouse-pointer to select that wrapper and see in your browser if either only the first element appears selected or the whole gallery of images. If the former, then move one wrapper div up.

Once you find the div that wraps the complete gallery, check which class it uses. There might be several class names there, or there might be yet another wrapping div with class name that seems more appropriate.

You may need to compare other galleries to make sure each one has a common same class name. But if you’re sure, just add that class name with a dot in front of it to the Sections(s) field, like this:

.wp-block-gallery,.common-gallery-class-name

Note: both the custom class and the standard WordPress gallery class are in there, separated by a comma.