Support » Plugin: FooBox Image Lightbox WordPress Plugin » FooBox not working on Firefox

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Support phillcoxon

    (@phillcoxon)

    Hi @sstoker,

    Would you please provide the page and link directly to the image you are trying to show in FooBox?

    Is it a standalone image or are you triggering FooBox from a gallery?

    sstoker

    (@sstoker)

    Hi.

    Here is the link to the page: 165.22.82.145/aguascalientes/
    And here is a link to the specific image: http://165.22.82.145/wp-content/uploads/2019/12/aguascalientes.svg

    There are about 30 pages that have similar headers as this page.

    It is a stand alone image.

    Thanks!

    Sam

    • This reply was modified 3 months ago by sstoker.
    Plugin Support phillcoxon

    (@phillcoxon)

    Hi Sam,

    I suspect that the issue is that being an SVG that can be scaled to any size FooBox is not able to extract the image size from the image itself.

    If you are manually inserting the link into the page or into a page template would you please try adding the data-width and data-height parameters to the link as well.

    Specifying the initial data-width and data-height may help. This is off the top of my head as I’m not in front of my main computer but give it a try and it still doesn’t work let me know and I’ll do some additional testing when I’m back in the office.

    • This reply was modified 3 months ago by phillcoxon.
    sstoker

    (@sstoker)

    Hi Phill,

    Thank you for your quick response! I did try adding height and width to the image, but unfortunately, it hasn’t made a difference. Please let me know if there is any additional info you need from me. Appreciate your help!

    Best,

    Sam

    PS: One other thing that might be helpful to know is that I tried replacing the svg with a png and still had the same problem.

    • This reply was modified 3 months ago by sstoker.
    Plugin Support phillcoxon

    (@phillcoxon)

    @steveush – are you able to review this and give some feedback please?

    steveush

    (@steveush)

    Hi @sstoker,

    @phillcoxon is correct that a width and height need to be provided for FooBox to work correctly with SVG’s however the dimensions need to be supplied using data attributes on the anchor link that wraps the image. For example:

    <a href="foobox-example.svg" data-width="1920px" data-height="750px">
    	...
    </a>

    I’m not sure why it was not working for you with a PNG file as it should simply pick up the dimensions and display the image. I’ll do some additional testing on my end for that issue but adding the above data-width and data-height attributes to your anchor should resolve your current issue using a SVG file.

    Thanks

    Plugin Support phillcoxon

    (@phillcoxon)

    Hi @sstoker,

    Checking in quickly to see if you’ve tested Steve’s solution and if it’s now working for you.

    Let us know!

    Thanks in advance,

    Phill

    Hi Phill,

    Thanks for checking in. It is working! I had originally added data-width and data-height to the image and so thought it wasn’t working, but just now I added it to the anchor and it works great. Thanks a lot for your help. Very cool. Here’s the code in case anyone else bumps into this problem.

    Many thanks!

    Sam

    <a href="http://165.22.82.145/wp-content/uploads/2019/12/aguascalientes.svg"><img src="http://165.22.82.145/wp-content/uploads/2019/12/aguascalientes.svg" alt="InformaciĆ³n Aguascalientes 2019" /></a>

Viewing 8 replies - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.