Mobile Image Grid Gallery
The image grid can show four, three or two thumbnails when viewed in landscape mode and three or two in portrait.
Tapping an thumbnail opens a lightbox slideshow starting at the large image which corresponds to that thumbnail. The slider is navigated by swiping and has image captions which are derived from the alt text attribute of the thumbnail. The slider is closed by tapping anywhere on the overlay background.
While the thumbnails obviously have to be cropped to the same size and aspect ratio, the large images can have different aspect ratios - within reason!
There are two controls for adjusting the large image width and height ratios to make sure that the full image is in view. Adjustments should be tested on a suitable device - or using the iOS Simulator - in both portrait and landscape mode.
The thumbnail images should be cropped to the actual size required. A width of 240px should suit most applications.
The lightbox slider is responsive so the large images need not be any wider than the maximum width setting which would normally be 736px. It is really important to keep image file size to a minimum for any website but especially for a mobile one. As usual, make sure the image file names have no spaces or special characters in them.
The number of thumbnails per row can be set for both landscape and portrait mode and there is a control for setting the break point at which this change takes place. The default value of 479px will change the layout on all sizes of iPhone - including the smallest.
There is a control for adjusting the spacing between the thumbnails which can be set to zero if no spacing is required.
The optional heading and text block should be used to describe the images for both the visitors and the search engines. Mobile compatible text hyperlinks can be created as described in the Info section and styled in the widget settings.
The optional footer allows the creation of a completely responsive page and has options for auto update of the copyright year and a smooth scroll to the top chevron tab.