Tweak to improve featherlight

1

I have just been playing with the featherlight plugin and it works really nicely except for one small glitch. On very narrow images the “next” button pushes the dimensions out and brings up a scroll bar. So the image keeps jumping around as you hover over it. I found a solution by reducing the font-size on the arrow from 80px down to 40px. It’s in featherlight.gallery.min.css - you might need to unminify the css file first.

    .featherlight-next span,
    .featherlight-previous span {
        display: none;
        position: absolute;
        top: 50%;
        left: 5%;
        width: 82%;
        text-align: center;
        font-size: 40px;
        line-height: 80px;
        margin-top: -40px;
        text-shadow: 0 0 5px #fff;
        color: #fff;
        font-style: normal;
        font-weight: 400;
    }

While I was there I also changed the background to be darker and give more contrast.

    .featherlight-next:hover,
    .featherlight-previous:hover {
        background: rgba(0, 0, 0, 0.4);
    }

Before:

before
before464×1011 64.3 KB

After:

after
after483×1009 66.3 KB

2

@ozfiddler, I believe this is an issue with the Gallery extension of the original Featherlight.js library itself.

Open an image in the gallery shown above and set its width to 100px. It shows the issue you are experiencing.

You might consider adding an issue or pull request at its repo.

3

Yes, have posted an issue on GitHub. Happy to do a PR, but I am still trying to work out what I think is the best solution. I am currently trying it without the opacity band down the side, and making the arrow a colour that will stand out on any image. Anyway, can discuss on GitHub if there is any interest. But apart from that it works really well. :+1:

yellow
yellow594×811 60.9 KB

4

Ah yes, it was posted in an issue in the Featherlight repo and has tag wontfix.

So I guess custom css is the best solution for individual scenarios.