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.

Whenever you create or re-open an existing Image Gallery component, Alpha Anywhere will automatically copy in all of the A5 demo images into your project.

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.