You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
You need to set place the image in a div whose height is equal to the height of the image. That way, the grid item will always be the correct height even if the image loads slowly.
Sorry for necrobumping, I'm using the library for a dynamic number of images, but I'm facing the same issue as OP, even after setting the height of the div the same as the image it contains.
<div id="container-imagenes">
{% for i in inmueble.imagenes_inmueble %}
<div style="height:{{ i.thumb_height() }}px;">
<a href="{{ url_for('static', filename='uploads/' + i.filename) }}"><img src="{{ url_for('static', filename='uploads/' + i.thumbnail) }}"></a>
</div>
{% endfor %}
</div>
thumb_height() is a method that returns the image height in px from the backend
I'm initializing the grid like this:
let magicGrid = new MagicGrid({
container: "#container-imagenes", // Required. Can be a class, id, or an HTMLElement.
items: {{ inmueble.imagenes_inmueble | length }},
animate: true // Optional.
});
magicGrid.listen();
but images appear stacked until I resize the window and the grid starts working. Am I missing something?
Thx
Items stack on top of each other on the initial load until I resize
The text was updated successfully, but these errors were encountered: