Fancybox v5 (Lightbox and Galleries)

Darkle

rafaelzgz That line you are talking about is part of Flarum's behaviour, it happens if the image is inside a link, just like it happens with text links.

You could remove it by adding this to your CSS:

.Post-body a {
    border-bottom: none!important;
}

The problem if you do this is that the line would also disappear from text links, if you don't mind it's the simplest solution.

MikeJones

Just installed! Works great, thanks for keeping this one alive!

Darkle

1.0.0

Credits and many thanks to @IanM and the assistance of @davwheat for this huge PR!

Upgrade to fancybox v4
No longer has any external depencies
Refactor into standard code structure
Add Github action to compile JS

♻ Update

composer update darkle/fancybox
php flarum cache:clear

Hari

Darkle any plans? Hari

Darkle

Hari I'm not quite sure yet how to do it, datitisev helped me a bit with it, to clarify the idea, but I have to think about it so I don't break anything 😓

Hari

Darkle just mentioned the same at github too iamdarkle/fancybox2

Justoverclock

Darkle not sure if works:

this.element.querySelectorAll('img:not[src$=".gif"]')

Hari

nukapop92 read this hrvoje_hr 🙂

Darkle

nukapop92 To add something else, thanks to the latest PR now the extension uses fancybox v4 which doesn't use jquery and is lighter, also by not using external dependencies the speed of the site improves a bit in my case it's been about 100-200ms.

MikeJones

Darkle I really need to update tomorrow!

010101

Darkle Hmm. I’ve avoided installing the past versions of this because I was worried about conflicts or it slowing things down. But, this sounds really promising. I think I shall install it.

Geraldlzc

Darkle When I get close, jump to the top

Darkle

Geraldlzc I think the issue you are referring to is reported here (iamdarkle/fancybox4), can you confirm if it is the same?

Geraldlzc

Darkle Yes, thank you for your reply.

Riche

Darkle Hello Darkle, Regarding this question, there is a slideTo call in line 31381 of @fancyapps/ui/dist/fancybox.esm.js. Is it the reason that the previewer will return to the top after it is closed?

MikeJones

Updating is not working for me:

Darkle

MikeJones Try specifying the version and with require instead of update: composer require darkle/fancybox: "1.0.0"

MikeJones

Darkle looks like that didnt work either:

Darkle

MikeJones Oops! my bad I added an extra space between darkle/fancybox: and "1.0.0" it should look like this: composer require darkle/fancybox:"1.0.0"

MikeJones

Darkle that worked thanks!

MikeJones

The update I think breaks some of my custom CSS. I used to use this line to take away the under line when the mouse hovers on the image:

.fancybox:hover {
    border-bottom: none !important;
}

Darkle

MikeJones Yeah, it's a bit different now, the exact replacement for your code would be as follows:

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

For people who are interested, in case you don't want the underline to appear ever, with/without hover on the image, it would be like this:

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

« Previous Page Next Page »