JIG uses an automatic width detection, meaning that it'll snap to the maximum available horizontal space, just like text. Sometimes this cannot be achieved. If your content area is manipulated or loaded later than normal page loading sequences, JIG might not be able to detect the (changed) width. In this case the grid will show an error message or appear broken. Try resizing the browser window: if everything shows up or pops into place, then the following fix will work.
Add this code to JIG settings > General tab > Custom JS setting, or your theme’s Custom JS:
1 2 3 4 5 6 7 8 | jQuery(document).ready(function(){ var jigs = jQuery('.justified-image-grid'); if(jigs.length !== 0){ jigs.each(function(){ jQuery(this).data('justifiedImageGrid').createGallery('resize'); }); } }); |
If it doesn't seem to solve the problem, try the little bit slower, more delayed version:
1 2 3 4 5 6 7 8 | jQuery(window).load(function(){ var jigs = jQuery('.justified-image-grid'); if(jigs.length !== 0){ jigs.each(function(){ jQuery(this).data('justifiedImageGrid').createGallery('resize'); }); } }); |
Other possible solutions:
- If there isn't any, add a few lines of text content before or after the grid. In some cases it helps to establish the content area.
- Add a value to JIG settings > General tab > Custom width (whole grid). It should be the width that is available for text as well.
- After having a Custom width set without luck, try setting Width mode to the Fixed: Non-responsive option. This will force a width for JIG, but you'll lose the responsive feature.
- Do not apply borders or (horizontal) margin / padding on JIG thumbnails using CSS. Doing so messes up the calculations. There are built-in settings to achieve these.
- If the grid is fine as in centered, but not justified, check the Incomplete last row setting.
- If the grid is broken or misaligned, the space between the thumbnails is uneven, then reset your browser's zooming settings, especially if you are zoomed out. Try using a borderless preset/setup, as those are more susceptible to zoom-related problems.
- Make sure your Margin around gallery setting includes the unit (px).
Note that the minimum visible width of the plugin is 10px, under this it won't show anything.