Image Gallery Component
Description
The Image Gallery is a powerful component for displaying JPEG and PNG images in a mobile or web application.
Discussion
The image gallery component will scan a thumbnail directory (the thumbs sub-directory) that is contained within a specified image directory and automatically create a single page image gallery that supports both mobile and desktop browsers. It automatically detects the browser and adjusts to exploit the capabilities of the target device/browser.
The image directory may be bound to an argument in a parent grid component. The image directory must be under the web root, or it will not be displayed.
Thumbnails should be sized at 75px x 75px and images should be sized at 1024px x 768px for optimal display on the iPad.
Thumbnail images must be placed in a subfolder called Thumb alongside the images to display in the Image Gallery Component. Thumbnail image names must also exactly match the name of the corresponding image in the parent folder
If the image contains EXIF information, the EXIF information may be displayed, and should the EXIF data contain GPS information, then a Google map may be displayed denoting the image location.
For best results, create the image and thumbs folder structure before creating a new Image Gallery Component. You cannot enter this folder in the Default Images Directory property unless this folder, including the thumbs subfolder, exists in the project folder; otherwise it will generate a JavaScript error.
The EXIF information is retrieved through the open source ImageMagick identify.exe program which therefore must be installed on your development machine (for it to work in LivePreview) and on the web server. If you simply run the standard install for ImageMagick, your path will be modified to include access to the required file(s). See www.imagemagick.org
- Name
- Description
- Image Gallery Component Events
Information about client-side and server-side events for the Image Gallery Component.
- Image Gallery Properties
A list of image gallery properties with their descriptions.
Referencing the Image Gallery Object in JavaScript
The Video Player component can be used in JavaScript scripts by referencing the {component.object}_a5_iGallery object. For example:
var imageGallery = {component.object}_a5_iGallery;Image Gallery JavaScript Methods
The only public method available for the {component.object}_a5_iGallery is resize_iGallery(), which forces the gallery to resize, and is useful when the container resizes.
Automatically sizing images
The following batch (.bat or .cmd) file can automatically resize JPEG and PNG images and create thumbnails, assuming ImageMagick is installed.
@echo off if not exist thumbs md thumbs echo Resizing jpg files mogrify -resize 1024x768 -quality 75 *.jpg echo Generating jpg thumbs mogrify -format jpg -path thumbs -define jpeg:size=150x150 -auto-orient -thumbnail 75x75 -gravity center -extent 75x75 *.jpg echo Resizing png files mogrify -resize 1024x768 -quality 75 *.png echo Generating png thumbs mogrify -format png -path thumbs -auto-orient -thumbnail 75x75 -gravity center -extent 75x75 *.png echo Process complete.
Videos
To learn more about the Image Gallery Component, watch the videos below.
Image Gallery Component iPad Demo
Bob Moore demos the Image Gallery Component on an iPad and discusses the software design goals for the component which include device adaptability for both desktop and mobile devices.
Image Gallery Component Quick Start
In this video, Selwyn Rabins shows how easy it is to get started with the Image Gallery Component.
Overview of the Image Gallery Component
This video demonstrates the Image Gallery Component.
Using the Image Gallery Component in a Tabbed UI Component
The Image Gallery Component can be opened from a Tabbed UI. Watch the video below to learn how.
Calling the Image Gallery from a Button on a Grid Component
Grid and UX Components can be opened when clicking a button in a Grid Component using Action Javascript. The Image Gallery can also be shown using Action Javascript. Watch the video to learn more.
Filtering the Images Shown in an Image Gallery Component
By default, when you open an Image Gallery, all of the images in the specified folder as shown. However, the Image Gallery supports a filter property that allows you to apply a filter to the list of files in the folder. For example, if you specify a filter of image_bathroom_*,image_kitchen_*, then only images that start with 'image_bathroom' or 'image_kitchen' will be shown in the Image Gallery.
This ability to filter the list of images shown in the Image Gallery dynamically greatly enhances the flexibility of the Image Gallery.