FooBox not working on Firefox

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

    (@phillcoxon)

    4 years, 3 months ago

    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?

    Thread Starter sstoker

    (@sstoker)

    4 years, 3 months ago

    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 4 years, 3 months ago by sstoker.
    phillcoxon

    (@phillcoxon)

    4 years, 3 months ago

    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 4 years, 3 months ago by phillcoxon.
    Thread Starter sstoker

    (@sstoker)

    4 years, 3 months ago

    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 4 years, 3 months ago by sstoker.
    phillcoxon

    (@phillcoxon)

    4 years, 3 months ago

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

    Plugin Author steveush

    (@steveush)

    4 years, 3 months ago

    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

    phillcoxon

    (@phillcoxon)

    4 years, 3 months ago

    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

    Thread Starter sstoker

    (@sstoker)

    4 years, 3 months ago

    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)
  • The topic ‘FooBox not working on Firefox’ is closed to new replies.