Fancybox wrapper

[deleted]

All - please note, I have removed the phenomlab/fancybox repository, and replaced this with phenomlab-fancybox-wrapper (to more accurately reflect what this extension does).

IMPORTANT: If you have this extension installed, please issue composer remove phenomlab/fancybox then issue composer require phenomlab/fancybox-wrapper

Note, that this train will soon also support lazy loading via reflar/recache

[deleted]

MikeJones tagged phenomlab\fancybox-wrapper at 0.2 which now has support for reflar/recache lazyloaded images 🙂 You might need to wait a while for it to be available, but the tag is 0.2 - you should be able to execute composer update phenomlab/fancybox-wrapper

MikeJones

[deleted] Works like a charm thanks!

[deleted]

MikeJones Pleasure 🙂

MikeJones

@[deleted] when I close the fancy box it jumps me to the top of my post each time, and does an odd animation. Not sure how to explain it....

[deleted]

MikeJones no need to explain. I've seen this also. It's coming from the Fancybox library, and it's something I need to take a look at in order to override.

[deleted]

MikeJones when I close the fancy box it jumps me to the top of my post each time, and does an odd animation. Not sure how to explain it....

I've just tagged 0.4 which resolves this issue. It also adds a few performance increases - mostly deferring JS and CSS using async and preload. It's available on packagist now

Use composer update phenomlab/fancybox-wrapper. Check php flarum info to ensure you have 0.4. If not, use composer require phenomlab/fancybox-wrapper

MikeJones

[deleted] awesome I will give it a try shortly!

MikeJones

[deleted] well it didn't update...

Loading composer repositories with package information
https://flagrow.io/satis could not be fully loaded (The "https://extiverse.com/satis/packages.json" file could not be downloaded (HTTP/2 400 )), package information was loaded from the local cache and may be out of date
Updating dependencies
Nothing to modify in lock file
Installing dependencies from lock file (including require-dev)
Nothing to install, update or remove
Generating autoload files
composer/package-versions-deprecated: Generating version class...
composer/package-versions-deprecated: ...done generating version class
98 packages you are using are looking for funding.
Use the `composer fund` command to find out more!

[deleted]

MikeJones try composer require phenomlab/fancybox-wrapper as I mentioned in my previous post.

MikeJones

[deleted] Worked!

Looking good! It does look like I get an orange highlight on my images at the bottom. Maybe an underline? but I will look into css, I think the highlight looks odd on mouse over.

[deleted]

MikeJones that's probably your own CSS as I'm definitely not seeing that on my sites 👍

MikeJones

[deleted] I don't see any CSS or on hover type this when I look in inspect element:

Amarok

MikeJones @[deleted] Have the same underline under all images (thin if not over, but present)That's maybe because it's simply a link and apply the default css

[deleted]

Amarok yes, I had to set border-bottom: none; on all links to get rid of the same thing which is why I don't see it

MikeJones

[deleted] any way to set it just for images, and not all links in a post?

[deleted]

MikeJones does the border appear on all links ?

MikeJones

[deleted] I tried this but it didn't fix it:

a {
  border-bottom: none;
}

I still have the border on the bottom of the images

[deleted]

MikeJones I'll need to check this. I expect I can see this on your site ?

MikeJones

[deleted] yea you can check it out on my site. The line looks orange on my website, which matches the color of my links.

[deleted]

MikeJones @Amarok had a quick look at this, and see what you mean. The below CSS will resolve that

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