miromannino / Justified-Gallery

Javascript library to help creating high quality justified galleries of images. Used by thousands of websites as well as the photography community 500px.
http://miromannino.github.io/Justified-Gallery/
MIT License
1.68k stars 299 forks source link

Fast layout building not works with responsive-styled image #261

Closed kswro closed 3 years ago

kswro commented 6 years ago

Fast layout building feature (waitThumbnailsLoad=false) not works (image loaded in DOM but not shown in layout) when image is responsive-styled in CSS. You can try styling your image with "max-width: 100% and height: auto" in your CSS.

See: https://codepen.io/kswro/pen/dmoPEy

Unfortunately, Foundation.css (6.4.3) came shipped with responsive-styled image like that. I'm still looking a way to "reset" this CSS anyway.

JG 3.6.5 always returning $image.prop(width) and $image.prop(height) to 0 in this scenario. I need to revert commit a4828e2 since .attr() get the value of an element's attribute.

Btw, I'm using jQuery 3.3.1 and Chrome 65.

miromannino commented 6 years ago

So this problem is only caused by the use of $image.prop() instead of $image.attr()? If is that I would then revert that too in the official version, since is the second person telling me about the same problems now.

kswro commented 6 years ago

So this problem is only caused by the use of $image.prop() instead of $image.attr()?

In my case, yes.

jrondorf commented 6 years ago

I have the same issue, if I am setting the responsive images to

    max-width: 100%;
    height: auto;

the gallery isn't displayed.

hayatekagawa commented 6 years ago

Hi @miromannino

3.7.0 version still can't solve this bug. Yes, I can confirm reverted a4828e2 fix the problem as the other said. Looks like latest version still not reverted that commit although changelog says so.

code-keeper commented 6 years ago

Same issue. (Using Chrome 67)

Problem is that in case img width is set to 100% and attr width e.g. to 200 (<img src="#" width="200" />) $("img").prop("width") returns actual width and $("img").attr("width") returns 200.

EXAMPLE: https://codepen.io/anon/pen/LrVqNg

kswro commented 3 years ago

I think this can be closed since commit a9a3222c22174d31db532e10e13e6a93576e8cd4 has resolved this problem