Fancybox v5 (Lightbox and Galleries)

Hari

Darkle add an a option to exclude svg and gif

hrvoje_hr

Darkle thx! I can confirm that it doesn't catch custom Flamoji emojis anymore

heyitsritesh

This extension picks up all the images from the given post and uses the fancy box to display a slider gallery with small thumbs at the bottom.

I don't understand why it behaves like this. It's a fancybox extension, not a slider gallery extension.

There's another extension that works correctly: https://discuss.flarum.org/d/19535-fancybox-extension-beta

It isn't updated in a really long time. I hope this extension gets updated to only display the clicked image, instead of showing a gallery of all the images.

Darkle

heyitsritesh It's not something particular to this extension, modern versions of fancybox work like this by default, but if you don't want the slider to appear it's something you can hide, the extension you're pointing to uses an older version of fancybox so I guess that's why it doesn't appear.

heyitsritesh

Darkle Got it, thanks. How do I hide the slider? I just want the clicked image to pop up. No thumbnails or sliders.

Darkle

heyitsritesh You could compile your own version by adding that setting in the index.js or just use CSS to not show the slider, you would have to add this:

.fancybox__thumbs {display:none;}

Benzitczo

¡Gracias, esta mejor zoom funcionando!

adbo

Thanks for the great extension! This is really helpful for photography and graphics threads to view images full screen.

I noticed you managed to suppress/ignore fof/reactions and Flamoji images from fancybox. Any chance you could suppress Country Flags images too please?
All of our threads are currently looking like this 😅

Darkle

1.1.3

What's Changed

Full Changelog: 1.1.2...1.1.3

Prevent Country Flags from being captured by fancybox (adbo This should be fixed, I haven't tested it so I appreciate if you can confirm 🙂)

♻ Update

composer require darkle/fancybox
php flarum cache:clear

adbo

Darkle Thank you for the speedy work. Updating to 1.1.3 and clearing cache doesn't seem to have made a difference unfortunately. Here's my test flarum if you'd like to have a look at what's happening

meihuak

Darkle this is a great extension, thanks, can it work in flarum 1.8.5?

User17

meihuak Yes, it works with Flarum 1.8.5. I myself use this extension on my forum.

Capybara

Hi! Is there a way to remove the line under each image?

clarkwinkelmann

Capybara Gerriet the line comes from the Flarum built-in styling for the link (<a> tag)

I don't know if your content includes a link wrapped around the image, or if the link is added by this extension? If the extension creates its own link, it could add a special class to it so the default Flarum styling could be disabled. Maybe it does already, I'm not familiar with the extension

Darkle

Capybara Hey, could you confirm if this custom CSS works for you?

a[data-fancybox="responsive"] {
    border-bottom: none!important;
}

Gerriet

What a line ? I don' t see this

Capybara

clarkwinkelmann Thanks for the explanation! I'm using FoF Upload, the extension creates a link from the computer image, you're right

Capybara

Darkle It worked. Now all the images are without a line at the bottom, thanks!

Darkle

1.1.4

What's Changed

Add .Post-body class selector and exclude .no-fancybox class by @zxy19 in iamdarkle/fancybox9

Added the .Post-body class to the image selector. This change prevents conflicts with other extensions that add images outside of the post content.

Introduced the .no-fancybox class, allowing developers to mark elements that should not be wrapped by Fancybox, thus enhancing compatibility with other extensions.

The extension was causing conflicts with the user-decoration extension by mistakenly wrapping non-avatar image elements. The new selector limits the scope to only relevant post content.

New Contributors

@zxy19 made their first contribution in iamdarkle/fancybox9

Full Changelog: iamdarkle/fancybox1.1.3 → 1.1.4

♻ Update

composer require darkle/fancybox
php flarum cache:clear

Darkle

2.0.0

Fancybox v5 by @iamdarkle in iamdarkle/fancybox10

Screenshot

Upgrade to Fancybox v5

I’ve migrated the extension to the new version 5, which is a major rewrite with numerous improvements.

Automatic galleries

The update includes the new "Carousel" component, which works similarly to Post Galleries. It automatically creates a gallery from consecutive images separated by a line break. Also, fancybox and carousel are synced for a better user experience.

Example gallery:

![](https://images.pexels.com/photos/62289/yemen-chameleon-chamaeleo-calyptratus-chameleon-reptile-62289.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1)
![](https://images.pexels.com/photos/33287/dog-viszla-close.jpg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1)
![](https://images.pexels.com/photos/50577/hedgehog-animal-baby-cute-50577.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1)
![](https://images.pexels.com/photos/1661179/pexels-photo-1661179.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1)
![](https://images.pexels.com/photos/406014/pexels-photo-406014.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1)

Server-side rendering

I’ve implemented server-side rendering to help avoid layout shift issues, especially with large galleries of over 50 photos, preventing CLS problems and DOM disruption.

Full Changelog: iamdarkle/fancybox1.1.4 → 2.0.0

♻ Update

composer require darkle/fancybox
php flarum cache:clear

« Previous Page Next Page »