Resize your browser or turn your device to see the responsive gallery in action
The above example uses the following, generated shortcode (how to use):[$justified_image_grid preset=5 row_height=225 height_deviation=50 ng_pics=255,268,278,280,300,429,430]
What does responsive gallery mean? Do I need one? Is it important?
Discover an entire a gallery on a mobile device without panning around or pinch zooming. This is achieved by adjusting the content to your screen's width. You need a responsive gallery to show content on all devices nicely - without compromise.
- It means your galleries will look good and resized proportionally on all devices and resolutions.
- A native app look can easily be achieved so your visitors will have a good time and find it easy to view.
- This responsive gallery will fit to the width that is available for it, controlled by your theme.
- How much gets cropped from the thumbnails depends on your preferences.
- Having dynamic row height with a generous height deviation reduces cropping.
- A quick setting enables you to turn off any cropping whatsoever.
- If your site is not responsive this adaptation doesn't happen.
- Read more about responsive web design on Wikipedia.
How does it work in tabs?
Justified Image Grid has excellent tabs support. Instances in tabs communicate with their hidden neighbors. Galleries in initially hidden tabs also follow the responsive gallery concept as you'd expect. It has been tested in various tab solutions including theme shortcodes.
The above example uses the following, generated shortcode (how to use):[$justified_image_grid last_row=hide ng_tags_gallery=horse]
What mobile specific settings are available?
Several settings with the most important visual impact have a mobile counterpart. Desktop compositions may not look the same on mobiles and it makes sense to fine tune them for small screens. Mobile devices lack a mouse, therefore roll over animations are less useful - a setting can disable every mouse controlled animation for mobile devices.
- Change the row heights to serve thumbnails at a different size.
- Use a different lightbox, or none at all because images are well-displayed anyway.
- Single tap may act as mouse over but you can disable any mouse controlled interaction.
- Display captions on thumbnails differently.
- Apply color overlays and icon on thumbnails in another way.
- Generate special effects like desaturation without mouse interaction.
- In other words show all the bells and whistles on desktop but show a lighter version on mobile devices.
- Disable retina ready, high resolution thumbnails or change their quality.
- Different load more behavior.
- Have something else in mind? Change just about ANY setting exclusively for mobiles, using presets. Serve a bespoke look to devices.