Fancybox v5 (Lightbox and Galleries)

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

Mikenthuzi

I upgraded to the latest version, only a little issue with it:
after i clicked the picture, it zoomed in well, but when I press 'ESC' or click to close the image, i have to click 3 times to zoom out the image or exit the photo gallery.
All other features are perfect. Anyone got the same issue?

Capybara

Mikenthuzi Yes, I confirm, I have the same problem. At first I thought that the problem was in my forum. I usually get tired of clicking and just reload the page.

luceos

Mikenthuzi

Capybara

Darkle is aware of this. I was supposed to look into it, but ran into other urgent tasks that took precedence.

Ref iamdarkle/fancybox11

Darkle

Mikenthuzi Capybara Sorry about the issue. If you prefer, you can roll back to the previous version until there's a fix by running this command:

composer require darkle/fancybox:1.1.4
php flarum cache:clear

I haven't been able to reproduce it on my test Flarum site (where I'm only using core + fancybox and fof/upload, so it's pretty basic). If you could share your php flarum info, that would be great to check for any extension matching.

« Previous Page Next Page »