images curtesy of: Jacki Cammidge of www.drought-smart-plants.com
To use the image gallery start by opening your app in the editor and navigate to the 'Edit Pages' section. Find the 'Icon Buttons' and select the '+' button. This opens the pagetype library. Scroll down to the 'Image Page Types' section and select 'Mosaic.'
Hovering you cursor over your selection pops up a thumbnail image of the page type. On the right side you can see which platforms this page will work in, i.e iOS, Android and Web App).
On the page type selector page. After you have selected 'Mosaic' click on the NEXT button to continue. You will be asked to name the page. A generic file name of "mosaic.html" is offered. You can change the name of keep the generic one. Note; use only alphanemeric characters with no spaces or puncuation. Click the ADD PAGE button to continue. Then you are returned to the 'Edit Pages' section. Where you then select your newly named page by clicking the little 'edit' link on the right.
Your page will appear in the simulator and the editors appear on your screen. This What You See Is What You Get (wysiwyg) editor allows you to see your edits in real time. This is where you build your mobile image gallery. Simply fill in the information. Details to follow/
Thumbnails are generated by the page. They can be up to 300px wide on larger devices. Or as small as 100px wide on smaller devices. So it is wise to have high resolution images to start with.
Since the viewer is responsive small images may lose resolution if viewed on a screen larger than the image is wide. If you experience this you may want to remove or replace that image.
Keep in mind mobile apps are limited in bandwidth and pagespeed due to the nature of mobile device storage and retrieval capabilities. Where possible try to use compressed images. For image galleries a .jpg format is best. They tend to be smaller than .png and have better resolution.
This page is smart. You can input different size images but the thumbnail grid always stays symetrical. Odd shaped images are automatically thumbnailed to fit. Even better only visible images are loaded in the screen. This speeds up this page by not loading images until their necessary. Therefore you can make this page as big as you want knowing your users won't get bogged down while waiting for the page to load. Very nice!!
Home : Mobile App Templates : mobile image gallery