jQuery image animations

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.

http://blog.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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: