Let’s face it: old-fashioned slideshows are just so linear and boring. I was looking for a way to display my own images more effectively, and Blink is the result. The idea is to set up a collection of “blinkers”, which are positions on the page where images appear. The Blink program manages the group of blinkers — it sets up the initial blinkers on the page, and then manages a timer that in turn causes each blinker’s image to be replaced by a new one. By default, the order of blinking is randomized, but all blinkers are blinked each cycle.
The options appear in the first blinker position:
- Start/Stop: you can pause and resume the blinking.
- New: replaces the current set of blinkers with a new set, and you specify how many you want.
- Help: this is the Help page.
- Delay: the current time interval for blinking images. The Plus and Minus buttons let you increment or decrement the interval, and holding down Shift while clicking jumps by 5 seconds instead of 1.
The best part about Blink is that you can blow up any image you see just by clicking on it. This pauses any blinking, and shows you a larger version of your image in a modal popup window. The Close button on the popup window closes it, while the Next button will show the expanded version of the next image in the cycle. You can quickly cycle through all of the current images, but you have to resume blinking to see new images.
All of the images were taken by me, and the Blink program was written by me: DFF at Monolith Design.
For the technically inclined, all of the content for Blink is dynamically generated in Javascript and inserted at (configurable) named points in the DOM. In addition to changing the target containers, you can also change the class name of the blinker image containers. The demo page uses a simple CSS Grid for layout, but the Blink software will manage a set of blinkers wherever they sit on a page. The code is plain vanilla Javascript — no libraries or anything at all. You really don’t need a library for simple DOM manipulations any more. jQuery was a wonderful thing for years because it made writing production Web sites possible across platforms (especially the dreaded and reviled Internet Explorer). Improvements in Javascript have made so much of that unnecessary, and you get really, really lightweight code as a result….
I’ll eventually package this up and give it away, but this is just a fun side project right now. Drop me a line if you’re interested in the code. DFF