Web Filmstrip Script for Web Pages

This easy to use PHP and Javascript filmstrip allows you to place a Windows XP style filmstrip on your web site.

Example Usage of the Web Filmstrip Script
Showing Items 1 thru 3 of 10

The control above is an example of the Web Filmstrip Script in action.

What the Web Filmstrip Script Does

If you have ever viewed a folder full of pictures on Windows XP (like the My Pictures folder), you have no doubt seen the nice, user-friendly filmstrip view provided by Microsoft. This type of view is very well suited to displaying moderate to large collections of photographs, products or any other kind of pictures. Now, it is quick and easy to add this functionality to your own web page with our Web Filmstrip Script

Why We Built the Web Filmstrip Script

1. Most implementations of filmstrips on the web provide a harsh user experience. Each time a scrolling control (arrow) is clicked by the user, the browser makes another trip to the server to refresh the view. We find that behaviour jarring to say the least. On a dial-up connection, the delay and subsequent reloading of the images can be very time consuming, detracting from the overall usability of the site. This Web Filmstrip Script solves these problem through clever use of DHTML and PHP.
2. Most web designers create custom solutions that are essentially static, rigid and difficult to maintain. Our Web Filmstrip Script is designed and built such that all necessary code and configuration resides in a single location. Adding, deleting or changing items in your filmstrip is as simple as modifying the $images array in filmstrip_config.php (more about that here). Even if you have dozens of product pages, each showing the Web Filmstrip, chaning them all is extremely simple, and can be done very quickly. This is particularly good for sites that change frequently.
3. The Web Filmstrip Script has been designed with search engines in mind as well. One of the design features of the Web Filmstrip Script is that it pre-loads any and all links onto the page wherever it is used. This allows spiders to crawl any links you may have in the filmstrip to detailed product pages with descriptions or other relevant text.
4. Our script is FAST! Because the images are pre-fetched asynchronously with the initial page load, everything is at your user's fingertips when they need it. Even for users on dial-up, scrolling the script will be a split-second operation, instead of several seconds waiting for the next set of images to download.

Requirements for using the Web Filmstrip Script

Clients must have javascript enabled, and your web hosting provider must support the PHP scripting language. Nearly all Linux web hosting companies allow PHP scripting on their servers.

The Web Filmstrip Script is known to work in IE6 and Firefox 1.0.

How to use the Web Filmstrip Script

The Web Filmstrip Script consists of 2 files. One is the filmstrip engine itself, and the other is the configuration for the engine. Users should modify the filmstrip_config.php file to tell the engine what to do.

• Configuring the Web Filmstrip Engine

  The Web Filmstrip Script configuration file starts with a couple of parameters to control the cookie name used, as well as the number of items to display at once. You can generally leave the cookie name alone. By default, the Web Filmstrip Script will display 5 images at a time. This can be changed easily by changing the value of the $NUM_TO_SHOW variable.

  The most important part of the Web Filmstrip Script configuration file is setting up the $images array. For every image you want as part of your filmstrip, you will have a line in the file like this:

  $images[] = '<img src="test_images/sfo1.jpg" width="100">';

  The images can be configured any way you wish. To make the images links to other pages (possibly with enlargements), you can simply "wrap" the <img> tag with an <a href>, like this:

  $images[] = '<a href="my_sfo1_page.html"><img src="test_images/sfo1.jpg" width="100"></a>';

  For advanced users, you could easily drive the creation of the $images array from a database or a file in a loop. Basically, anything and everything that you put in the $images array will become an item in the web filmstrip.

• Incorporating the Web Filmstrip Script in your own page

  Now that the script is configured properly, and your images are all set up, it's time to add the filmstrip to your web page. This is a very simple task that requires only the following line of code:

  <? include_once("filmstrip_engine.php"); ?>

  In order for your web server to recognize that your web page contains php code, you will have to rename any file(s) that you want to use the web filmstrip script on. The file names must end in .php (for most web server installations).

Web Filmstrip Script Support

We are happy to assist you with any questions or problems you may have about the Web Filmstrip Script. Please fill out our online contact form, and someone will assist you within one business day.

Purchasing the Web Filmstrip Script

You can download the Web Filmstrip Script immediately and begin incorporating it into your web page designs. The cost is only $3.99 USD, and checkout is handled securely through PayPal. Click the button below to check out and download your Web Filmstrip Script now!

Satisfaction Guaranteed!

If you are not satisified with the web filmstrip script, just let us know within 30 days and we will refund the purchase price in full.

How the Web Filmstrip Script Actually Works

Warning: This is for the more technically inclined users.

This discussion will be broken into 3 parts. First, we'll talk about the initial load of the filmstrip. Second we'll talk about storing the current position within the filmstrip, and finally we'll discuss the "scrolling" feature.

To initially display the first "n" images, the script walks over the array, marking the first "n" items as visible. (note: "n" is configurable in the filmstrip_config.php). Actually, it's slightly more complicated, because we actually retrieve the client's last position, and show the next "n" items, but we'll discuss that in a minute. Currently we chose to use style attributes to control an item's visibility. We chose this route to avoid shipping another file (css), with only a single, trivial css selector (invisible). Every item in the list is actually put on the screen, but marked as "invisible" until the user selects one of the scroll icons, which we'll discuss in a minute.

In order to keep track of the user's position within the filmstrip, we use standard HTTP cookies. Javascript is used to set and retrieve the cookie values. The name of the cookie is configurable in filmstrip_config.php. Generally, you will not need to change the name of the cookie, unless you plan to use multiple independent web filmstrips on a single site (domain).

To accomplish scrolling, we use Javascript in combination with the cookie described above. When the user clicks one of the scrolling arrows, we perform the following:

• Calculate the new starting position.
• Set new starting position into the client Cookie
• Walk over the items in the images array, marking the "start" thru "start + n" items as visible.
• Change the text that shows the item numbers in view.

Of particular note is that we do not refresh the page when the user scrolls the web filmstrip. All of the images are pre-fetched on the initial load of the web filmstrip, and scrolling is accomplished using Javascript (DHTML) on the client. This is one of the distinguishing features of the Web Filmstrip Script. This provides for a much smoother user experience, because the page does not get reloaded in the browser window with each scroll action (click).

Thank You and Enjoy,
Steve Szettella & the 4word systems team