About tint.de

This is the online sandbox of Tilman, a designer working in and living near Nuremberg, Germany. I post a new minimal geometric composition each day to Geometry Daily. Please say hello. You can also find me on Twitter, Instagram, Facebook and Flickr.

← Back to List

imgStack 0.5

added on Saturday, May 19, 2007 13:31 pm

What it is

imgStack is a slideshow made with Flash and php. It displays the contents of an image folder in sequence in a defined area of a website.

Example

This is how the imgStack looks like at the size of 448 × 336 px with 16 images. Move your mouse cursor over the image for the interface.


You see imgStack.swf displaying the first image. On hover over the imgStack a semi-transparent three-pane interface fades in. With a click you can move to the next or previous image or get a thumbnail overview of all images at once.

Requires

  • php 4+ on the webserver
  • Flash 8+ in the user‘s browser

Features

  • super-easy to use: just point to a folder with images files
  • flexible, easy to update: no need to generate XML, lists or swf
  • all-in-one: no pop-ups, no extra pages, no overlaying of other content
  • intuitive, clean and unobtrusive interface: does not get in the way of the images, needs no extra space around them
  • successive loading of images: loaded images can be viewed while the others are still loading in the back
  • thumbnail overview: the images are sized down automatically, to fit the available space.
  • fits any images sizes
  • alphabetic ordering: change the order just by adding numbers to the filenames
  • versatile: image files can be .jpg, .png (with transparency) or .swf (with animation and transparency)
  • Automatic playback The images switch after a number of seconds you set.
  • free

Download

imgStack-0.5.zip
imgStack-0.5-src.zip (also contains all Flash sources)

How it works

Download the two files of imgStack above and put them anywhere on your webserver. imgStack.swf is the Flash movie, imgStack-getData.php the script that reads the images files. Next to them, place a folder with the images you would like to show. Embed the imgStack.swf in your XHTML just like you would any Flash movie. Set width and height as you like and pass the name of the folder in the “imgPath” variable. That is all. The php-script will read in the images of the folder and the imgStack.swf will display them in alphabetical order.

The code

to embed the imgStack. The important parts are: Set width and height (two times) and set the imgPath variable (also two times).

There is also a parameter named “auto” for automatic playback. Set it to any number of seconds and the stack will automatically switch to the next image after the given time. Simply leave it out to not have autoplayback.

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="448" height="336" align="middle">
	<param name="movie" value="imgStack.swf?imgPath=imagefolder&auto=3" />
	<param name="quality" value="high" />
	<param name="wmode" value="transparent" />
	<embed src="imgStack.swf?imgPath=imagefolder&auto=3" quality="high" wmode="transparent" width="448" height="336" align="middle" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object></pre>

If you would like cleaner and valid code, please use SWFObject .

You can move the imgStack files to another directory of your webserver if you prefer. For example in order to use the same imgStack in more places on your site. In that case the imgPath must contain the absolute path to your image folder.

Help

I‘m not an expert at writing documentations. If you have any questions, suggestions or just need anybody to talk to, please write to Tilman-at-tint-dot-de. Always happy to help.

Why imgStack?

There are already solutions for slideshows like this, and actually much more refined. SlideShowPro is excellent and has much more functionality, but I was never a fan of the microscopic thumbnails, the interface is too much in my book and it‘s not free. Lightbox and its variations are is also a very good method, but also (I think) has too much “interface” going on. And although it does a good job in fading out the content when displaying an image, it still feels to me like leaving the page.

Current Status

ImgStack got some attention since its release. Many asked for new features, but unfortunately I don‘t have the time to make that happen. That is why there is now another download link (above) that also gives you additional flash sources (a .fla and some .as files). Feel free to change and add anything you need! Please let me know what you come up with!

blog comments powered by Disqus