Working on a personal project over the weekend I needed a better way to provide a central image to a site. The image was the major draw card for the site and we wanted to place links and other content on and around the image.

As we wanted to showcase multiple images the easiest solution was to animate the image replacement with jQuery but we realized the problem with that was the links and floating content really needed to move depending on the underlying image.

A combination of jQuery, CSS and old fashioned Javascript produced a fairly simple solution where it's easy for us to swap the images for new creative content and via javascript mapipulate where the captions need to move to.

https://offbeatmammal.com/samples/play/slider.html

Given a bit more time I'll tweak the scripts to pick up the starting location from the CSS rather than hard coding in two places, and optimze the code and CSS a bit more, but as a proof of concept it was pretty effective.

After playing with the jsErrLog javascript error reporting code (a mixture of javascript and Python for AppEngine) it was nice to do something more front-end oriented.