search

banthagroup / fslightbox

An easy to use vanilla JavaScript plug-in without production dependencies for displaying images, videos, or, through custom sources, anything you want in a clean overlying box.
MIT License
351 stars 30 forks source link

Lightbox doesn't work if target has an uppercase file extension #134

Open afroewis opened 3 years ago

afroewis commented 3 years ago

Hi,

Thanks for the library. It's great.

This doesn't work:

<a data-fslightbox href="img/nov-20/Forstmulchen%20(Gross).JPG">
                <img src="img/nov-20/Forstmulchen%20(Handy).JPG">
            </a>

This works (given that you rename the file and make the JPG lowercase)

<a data-fslightbox href="img/nov-20/Forstmulchen%20(Gross).jpg">
                <img src="img/nov-20/Forstmulchen%20(Handy).JPG">
            </a>

In the first case, it displays the message "Invalid source" when opening the lightbox, even though there is no reason uppercase file extensions should be disallowed.

If you confirm, I'm happy to submit a PR.

piotrzdziarski commented 3 years ago

It's strange, for me it works correctly. Maybe you just don't have image with uppercased extension? If you have disable local storage and try again, maybe it's some cache issue:

fsLightbox.props.disableLocalStorage = true;
viniciussbs commented 3 years ago

I've had the same issue with a URL with querystring. Something like https://cdn.example.com/images/bg.jpg?v=1234567890. Since, in my case, I only have images, the workaround is to pass data-type="image".

<a data-fslightbox href="img/nov-20/Forstmulchen%20(Gross).JPG" data-type="image">
  <img src="img/nov-20/Forstmulchen%20(Handy).JPG">
</a>