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.
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.
- php 4+ on the webserver
- Flash 8+ in the user‘s browser
- 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.
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.
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.
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.
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.
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!