Welcome to Your Gallery!
This tutorial shows you how to get started with the Flash Image Gallery called Gallery by Dali. This tutorial assumes that you have already unzipped the gallery files, and that you understand how to FTP files and folders to your web server. I recommend using Absolute FTP, although any good FTP client should work.
Step 1: Upload Default System
The files that you downloaded from TUFaT.com are everything that you see in the online demo. Unless you coincidentally look exactly like the people depicted in this demo, you will no doubt want to change the gallery to suit your needs.
To get started, I suggest upload all of the files to your server, just to be sure that everything works well. The idea is that we'll make one small change at at time, until we have the gallery that we want. For example, you can create a sub-folder on your web server called "gallery", and just upload all of the gallery files and folders to the "gallery" folder.
In your TUFaT.com download, there is a "public_html" folder, and within that folder there are various "skin" folders. You should upload the files from the skin of your choice to your web server. It's not necessary to upload all skins. Please note that these skins were added in version 1.3, so if you have an earlier version, just upload the files that are within public_html.
Thus, to access your gallery after uploading, you would go to:
http://www.your_domain.com/gallery/gallery.html
You should see the gallery load with an image of some children playing in a pool.
You can, of course, rename "gallery.html" to "index.html" or whatever you want. You can upload the files to any folder on your server, or even make the gallery your homepage by uploading to your server root, and renaming the HTML file to index.html. If you are using version 1.3 or higher of the gallery, only index.html will be present.
Step 2: Edit Gallery Properties
A lot of people get freaked out when I tell them that they have to edit an XML file. You shouldn't be worried about that. XML files are just plain text files with a particular format. I recommend that you use Textpad to edit your XML file. You should not use Microsoft Word or WordPad. Windows Notepad should work, or EditPlus. These are free programs, or at least come with a free trial.
If you really, REALLY don't want to edit the XML configuration file, you can use the PHP-based XML editor, a free add-on to Gallery by Dali, located in the "xmleditor" folder that comes with your download. I recommend that you at least read through this document before using the XML editor. Skip directly to the XML editor tutorial.
The principle that we'll follow during the XML editing is: make ONE change, then TEST. Let's change the watermark text. Open the XML file with Textpad, and scroll down to the middle of the file, where "(c) 2005 SOME COMPANY INTL." text appears.
Change the text (but leave the surrounding double-quotes) to the watermark of your choice, or remove the text (but again, leave the surrounding quotes!) to remove the watermark completely. For example, if my company's name is "New World Images", then I would use something like this:
I would also like the watermark text to be centered, directly in the middle of the image, and I would like to make it a bit larger and fainter (barely visible). I think that I would also like to remove the shadow arround the watermark text. To accomplish these changes, here's what I did:
Here's what my XML looks like:
Upon refreshing my web browser, the result looks like this. As you can see, the watermark is much larger, and just barely visible over the image.
IMPORTANT: Depending on your web browser settings, you MAY need to clear your browser cache before these changes are observed. This is because XML files are frequently cached, which means that they are stored as temporary local files on your system. To clear your brower cache in Internet Explorer, go to Tools -> Internet Options, then click on the "Delete Files" button.
If your are using Mozilla FireFox, go to Tools -> Options, then click on the Privacy icon at the left, and then "Clear" on the bottom right:
Ok, let's get back to that XML file. In the steps above, I just changed one setting, then viewed the changes. Once you become more adept at editing these XML properties, you may not need to do this, but it's still a good idea. You can easily see that the config.xml file contains dozens of options for configuration of this gallery. The reason for this is so that you can change the gallery without requiring knowledge of Flash (which is a LOT tougher than XML!). This image gallery has been designed with the goal of simple editing and configuration.
Most of the XML tags and properties are self-explanatory. For example, in the XML tag called "menu", it's easy to see that this controls the order of the top-left menu items. If you didn't want to display the Next and Previous menu items, you could just delete those tags from the XML file, as shown below. A better strategy is to comment them out by surrounding the un-wanted tags with <!-- and -->, as I have done.
You will no doubt that also notice that these menu items are in reverse order of how they appear in the gallery. You should not change the "type" property, but you can change the order of the menu items by simply re-ordering them in the XML.
You can also set various "startup options" - i.e., how the gallery appears when first started - by editing the tags in the "gui" section. For example, if I wanted the volume to be somewhat muted by default, I would change the <soundvolume value="100"> tag to <soundvolume value="50">. If I wanted to hide the top-left menu, I would set "showbrowser" to 0 instead of 1 (the "browser" is the same as the menu menu).
Here's the result of setting <showbrowser value="0">...
Ok, now instead of explaining every single XML property (this tutorial would go on forever), try experimenting with the various settings, then refresh to see the result. You may need to clear your browser cache at some point if you don't immediately see the effect. You can change a lot of colors by editing the various <theme> section properties. The color values range from 0 (no color) to 255 (lots of color).
Step 3: Add Images
At some point, you're going to want to actually start adding images to your gallery. Open the config.xml file again with Textpad, and scroll to the very bottom. It is here that you can add directories and subdirectories to your gallery. To help get started, I would suggest leaving the current XML data, and just edit it to suit your needs. For example, let's change the first category from "Travel Album" to "Trip to Paris".
Here's a very important point: You must ALSO change this in the actual folder name, where the images reside. Thus, to change a menu name, you first change the XML, then also change the folder title. This is how the gallery "matches" the XML data with the actual images in folders and sub-folders on your web server.
Next, you can just add images and image desriptions. As you can probably see, these are what the "<img" tags are for. The "value" is the image name, and the text between the XML tags is the image description. Please be aware that the image names are CASE-SENSITIVE. Thus, "MyImage.jpg" is NOT the same as "myImage.JPG". Please be very careful of this, since it's an extremely common cause of error.
IMPORTANT: Your images must be of the JPG file format, and they MUST be non-progressive. If you are using Adobe Photoshop, a very popular and powerful image editing program, then when you save the image for the Web, be sure that the "Progressive" checkbox is NOT checked.
There is no limit to the number of images or image categories that you can add. You can add sounds to your images, as demonstrated by the "Metaleuca Inc." example. This feature is useful for creating Flash presentations of your images. MP3 files are stored externally in the same folder as the category images.
If you want to embed HTML tags with the image description, you need to surround the description text with "CDATA" tags, as shown by the first item in the Metaleuca example:
<img value="page1.jpg" mp3="page-1.mp3" name="Page 1"><![CDATA[Probably the most visible area where firms can benefit from B2B e-commerce is through participation in an online exchange to buy or sell goods and services. <br>With the Internet, buyers and sellers connect more efficiently. E-marketplaces provide participants with greater knowledge of prices, availability, supplier capacities and abilities, and alternative products. It is less expensive to search for products and compare prices through e-marketplaces than to hunt through catalogs and make phone calls.]]></img>
Thanks for using this Flash Image Gallery! Remember: upgrades are FREE from TUFaT.com, and can be freely accessed from the Download Area.
Step 4 (optional): XML Editor
Proceed to the XML Editor tutorial.
The XML Editor is an OPTIONAL add-on to Gallery by Dali. It is a PHP-based system for automatically updating and adding to the XML configuration file, so that you do not have to manually edit the XML configuration file. Please note that this XML editor requires that you CHMOD a folder so that PHP can write to it. It also requires that file-writing functions be enabled in your server's PHP setup.