Documentation - Installation

Installation of Featurific is actually quite simple. There are three main steps in deploying the gallery to your website:

  1. Uploading files
  2. Inserting code
  3. Configuring code

1. Uploading Files

Once you have downloaded Featurific, decompress the zip archive with a zip tool. Once extracted, look for the three main program files inside of a
directory named 'featurific':

  • featurific.swf (or featurificPro.swf)
  • data.xml
  • swfobject.js

Using an FTP client or your web host's file upload tool, upload the entire featurific (or featurificPro) directory to the same directory as your HTML files. (Ideally, put the directory ('featurific') in the same directory as your HTML files. If you cannot put them in the same directory as your HTML files, you will need to configure the code as explained in the section "Configuring Code" below.)

To verify that you have uploaded the code successfully, access the file named "testHarness.html" in the featurific (or featurificPro) directory. If everything has been uploaded correctly, you should see the gallery showing some demo screens.

2. Inserting Code

First, identify the page of your website on which you would like to display Featurific. Open up the HTML code, either by using a text editor on your local system, or by using your web host's HTML editing tool. Insert the following code into the HTML page where you would like the player to appear.

<!-- Begin Featurific Flash Gallery - featurific.com -->
<script type="text/javascript" src="featurific/swfobject.js"></script>
<div id="swfDiv" name="swfDiv" wmode="transparent">
<script type="text/javascript">
// <![CDATA[
fo = new SWFObject("featurific/featurific.swf?&lzproxied=false", "lzapp", "500", "275", "6", "#FF6600");
fo.addParam("swLiveConnect", "true");
fo.addParam("name", "lzapp");
fo.addParam("wmode", "transparent");
fo.addParam("allowScriptAccess", "always");
fo.addVariable("xml_location", "featurific/data.xml");
fo.write("swfDiv");
// ]]>
</script>
</div>
<!-- End Featurific -->

Before moving on, save the HTML file that you've been editing and if necessary, upload it to your web host.

3. Configuring Code

3.1 Configuring Gallery Width and Height

This step (3.1) is only necessary if you are using the Pro or Enterprise versions of Featurific. (If you're using the FREE version, please skip to section 3.2 below). These versions allow custom-sized galleries, so you must change the height and width of the flash object within the HTML.

In the HTML that you inserted above, look for the following line:

fo = new SWFObject("featurific/featurific.swf?&lzproxied=false", "lzapp", "500", "275", "6", "#FF6600");

500 is the width of the gallery, and 275 is the height of the gallery. Change these values to reflect the desired size of the gallery. Now, open up data.xml and change the gallery height and width values there as well. Change the values in data.xml to match the values from the gallery height and width we chose above.

For example, let's assume that you want the gallery to be 300 pixels wide and 100 pixels tall. First, modify the code specified above, changing "500" to "300" and "275" to "100". The code should look like this:

fo = new SWFObject("featurific/featurific.swf?&lzproxied=false", "lzapp", "300", "100", "6", "#FF6600");

After saving the changes, open data.xml and make the same dimension changes. After saving your changes, the line from data.xml should appear as follows:

<size width="300" height="100"/>

Now that you have made and saved your changes, proceed to step 3.2.

3.2 Configuring Gallery Path

If you were able to upload the Featurific files to the same directory as your HTML files, then this step is not necessary. However, this step is necessary if the Featurific files reside in a directory other than the directory that contains your HTML files. In this case, you need to update the paths in the HTML code you inserted in step 2 above.

You can specify the path with either an absolute or relative URL. If you are unfamiliar with these terms, it's probably best to use an absolute URL. With the help of your web host if necessary, find the absolute URL to the Featurific directory. For example, if you uploaded the 'featurific' directory to a directory named 'files', the absolute URL used to reference the files will be something like: http://www.your-domain-here.com/files/. To verify that you have the absolute URL correct, try accessing http://www.your-domain-here.com/files/featurific/data.xml . If you've got the path correct, the contents of the data.xml file should appear in your web browser.

Once you've got the correct path to data.xml, remove the 'featurific/data.xml' portion from the URL. In our example, we had http://www.your-domain-here.com/files/featurific/data.xml . Once we remove the appropriate portion of the URL, we're left with:
http://www.your-domain-here.com/files/ . Take this URL chunk and paste it into the code at the locations specified below:

<!-- Begin Featurific Flash Gallery - featurific.com -->
<script type="text/javascript" src="<Paste URL chunk here>featurific/swfobject.js"></script>
<div id="swfDiv" name="swfDiv" wmode="transparent">
<script type="text/javascript">
// <![CDATA[
fo = new SWFObject("<Paste URL chunk here>featurific/featurific.swf?&lzproxied=false", "lzapp", "500", "275", "6", "#FF6600");
fo.addParam("swLiveConnect", "true");
fo.addParam("name", "lzapp");
fo.addParam("wmode", "transparent");
fo.addParam("allowScriptAccess", "always");
fo.addVariable("xml_location", "<Paste URL chunk here>featurific/data.xml");
fo.write("swfDiv");
// ]]>
</script>
</div>
<!-- End Featurific -->

Continuing with our example, this causes the URLs in the code to appear as follows:

  • http://www.your-domain-here.com/files/featurific/swfobject.js
  • http://www.your-domain-here.com/files/featurific/featurific.swf
  • http://www.your-domain-here.com/files/featurific/data.xml

Now, save your changes to the HTML file and if necessary, upload the file to your server.

That's it! You're done!

(Now that you've installed Featurific, you can get to work on customizing the gallery via the data.xml file.)