JavaScript Slideshow
With Flipping Tiles
This slideshow changes slides in four flipping tiles. The actual effect is done by gradually reducing the width of each tile, swapping images once the width reaches 0, and then expanding the tile back to its normal width. Once all four tiles have changed, the image is allowed to remain for a short time. Then the cycle repeats itself. This version of the slideshow requires PHP and GD Library support in order to generate the tiles. It is compatible with either the manual or the automatic slide file list generating scripts.
It took quite a while to get this code working well. Mostly, I just wasted a lot of time trying to shoehorn the swap change code into my primary JavaScript slideshow framework. Then I ran into a problem with how browsers update images. The animation worked properly, but the images didn't change until all four tiles had flipped. I solved that with a small bit of code that pre-fetches the next set of tiles after each slide change sequence.
When I started to create this version, I had intended to rely only on CSS to create the tiles - positioning the image with an offset that would only display the portion of the image appropriate for the tile. This would certainly have been more efficient in terms of server load and speed, but I was concerned that it wouldn't be visually pleasing. So I created a PHP script that generates the tiles dynamically.
For this version of my slideshow script it's even more important that all of the image files be the same size. While it will function with varying slide sizes, it looks horrible. It's also best if the height and width dimensions are even numbers. You'll also want to customize the value of the JavaScript variable "delay" which controls the speed with which the tile-changing effect proceeds. The best value will depend on the width of your slide image files.
One thing I haven't mentioned before is that my sample slides from Disneyland demonstrate that it would often be handy to customize the JavaScript to allow for a selectable position for the titles. I'd suggest adding a parameter to the entries in the titles file to include a position command such as "top" or "bottom", and then have the code alter the CSS position setting for "t2BoxObj". You could also add the ability to change the font color.
This page was last modified on August 27, 2020
