Getting Started

The documentation below is an overview of ImageXpress and it's componets is intended to aid ImageXpress users get started with the product. If you are still having trouble after reading this documentation, please contact us for assistance.
Introduction

ImageXpress is a single SWF (Adobe Flash) document that utilizes one XML file to customize the aesthetics and content of the application.

When you download ImageXpress the following content will be included...


FireFox

index.html

This HTML page will display the gallery and give you an example of how to optimize your web page for IMAGEXPRESS.SWF.

SWF

imageXpress.swf

This is the photo gallery application file.

XML

imagexpress.xml

This document is necessary to populate IMAGEXPRESS.SWF with content.

Images

'Images' DIrectory

A directory I have chosen to store the gallery images. Your can create your own or use the directory I have provided, it's completely up to you.

Images'js' DIrectory

A directory containing a Javascript file required to run IMAGEXPRESS.SWF within a web browser.

^ Top of Page

XML Configuration & Descriptions

Listed below are the XML attributes and XML nodes you need to be familiar with before you begin configuring and/or editing ImageXpress.


Config Attributes Value
width The desired width of your slide show in pixels – i.e. "550"
height The desired height of your slide show in pixels – i.e. "350"
bgcolor The background color of the application i.e – "FFFFFF"
navigationBg The background color of the navigation – i.e. "CCCCC"
imgBorder The border color of the thumbnail – i.e. "FFFFFF"
selectedBorder The border color of the currently viewing thumbnail – i.e. "FF0000"
text the color of text used in the title – i.e."FFFFFF"
timerDelay Seconds of delay when using auto-play – i.e. "6"
showTitles Show or hide the gallery titles – "yes" or "no"
showDescriptions Show or hide the image description – "yes" or "no"
transition The type of transition between images – i.e. "fade"or "slide"

XML Node Value
title Title of your gallery
auto-play Auto Play slide show on page load – i.e. "yes" or "no"
description Description of display image
pic Name of your image – i.e. example.jpg
thumbnail Name of your thumbnail image – i.e. example-thumbnail.jpg
link This can be left empty or you can add a related link to your image

^ Top of Page

Adding content to your slide show

Step 1.

Open the XML document with any text editor. i.e Notepad, Wordpad, Dreamweaver or your favorite text editor.

Step 2 - ImageXpress configuration

Only edit the code within the 'Config' tag. These options will configure all galleries within your slide show.


<Config width="460" height="380" bgcolor="222222" navigationBg="666666" imgBorder="999999" selectedBorder="FFFFFF" text="FFFFFF" timerDelay="4" showTitles="yes" showDescriptions="yes"/>

Step 3 - Adding Images to your Gallery

Each new gallery begins with this following code...
<slideShow title="ImageXpress Example Gallery" auto-play="yes" date="April, 2008">
and ends with this code...
</slideShow>
Between those tags goes the image data. For example, to add another image to a gallery copy the code below and place it directly below the previous </image> tag.


<image>
<description>Example text for image 1</description>
<image>img/01.jpg</image>
<thumbnail>img/thumbnails/01.jpg</thumbnail>
<link>http://google.com</link>
</image>
<image>
<description>Example text for image 2</description>
<image>img/02.jpg</image>
<thumbnail>img/thumbnails/02.jpg</thumbnail>
<link>http://cnn.com</link>
</image>

Step 4 - Adding Additional Galleries

Adding galleries to your slide show is easy. Copy and paste the below code into your XML document directly below the previous gallery.


<slideShow title="ImageXpress Example Gallery Two" auto-play="no" date="April 2008">
<image>
<description>Example text for image 2</description>
<pic>img/high-02.jpg</pic>
<thumbnail>img/thumbnails/high-02.jpg</thumbnail>
<link>http://cnn.com</link>
</image>
</slideShow>

Step 5

It's time! Go ahead and fill out the rest XML document using the information you have just inherited and enjoy!.

^ Top of Page

Installing ImageXpress

Coding

The code below illustrates how to implement ImageXpress on your web site. Copy and paste this code inside the source code of your web site.


<script type="text/javascript" src="js/swfobject.js"></script>
<!-- ImageXpress -->
<div id="flashContent">
You need to upgrade your Flash Player or you have javascript turned off.<code>noscript</code>
</div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("imagexpress.swf", "imagexpress", "460", "380", "8", "#ffffff");
so.addVariable("xml","imagexpress-v5.xml");
so.write("flashContent")
// ]]>
</script>

Editing

The above code has two areas(in red) requiring manual edits, width and height – before ImageXpress will function as intended. These areas should correspond to the dimensions you set within the XML document.

Also note the 'addVariable' line of code in red above. This allows you change the path to the XML or rename the XML document completely. If you remove this line ImageXpress automatically searches for imagexpress-v5.xml by default.

Click here for a live example of the XML file.

^ Top of Page

Important Facts to Remember When Preparing a Presentation
  • Although ImageXpress can hold thousands of images, please be aware that loading time of this application may take several minutes, as ImageXpress preloads all thumbnail images before loading the initial presentation image.
  • Image thumbnails should always be greater than 55px in width and 45px in height. Imagexpress does NOT resize thumbnails, it does however center them vertically and horizontally within the thumbnail viewing area.
  • Descriptions and related links are optional; however if you choose to leave the description and/or link elements empty you must leave the tags in place.
  • If you decide to hide descriptions your related link button will also be hidden.
  • ImageXpress runs at 30 FPS(Frames Per Second), so if you are loading ImageXpress into another .swf file the frame rate should be at least 30 FPS or ImageXpress will lag.
  • Please keep a copy of your login username is ALWAYS your email address you signed up with.

    • ^ Top of Page