« home

Testing Reflection Plugin

I spent several train rides this week putting together Reflection Plugin for WordPress. This plugin applies reflection effect to images on a blog. The reflection effect is done on the client side using the excellent Raphael JavaScript library. You can use normal image on your posts as usual, and you’ll get the reflection effect by simply adding ‘reflection’ to the class value.

Here are some examples of the effect…

Wide movie poster:

Album covers, aligned, with wrapping text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut pede ut mauris varius ultricies. In a dolor non risus dapibus faucibus. Etiam tristique pellentesque ligula. Cras tempus nunc vel turpis. Vivamus congue. Nullam hendrerit tincidunt metus. Pellentesque bibendum dapibus felis. Suspendisse risus magna, placerat id, malesuada eget, pellentesque quis, felis. Sed dolor lectus, vehicula rutrum, venenatis et, fringilla vel, tellus. Curabitur mi. Donec ligula pede, vulputate vitae, bibendum ac, pharetra in, elit. Pellentesque et mauris ut pede mattis commodo. Mauris massa odio, egestas eget, luctus id, suscipit sit amet, velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse ac sem. Cras nec dolor a ipsum consectetur lobortis. In blandit erat. Fusce mollis ultrices ipsum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut pede ut mauris varius ultricies. In a dolor non risus dapibus faucibus. Etiam tristique pellentesque ligula. Cras tempus nunc vel turpis. Vivamus congue. Nullam hendrerit tincidunt metus. Pellentesque bibendum dapibus felis. Suspendisse risus magna, placerat id, malesuada eget, pellentesque quis, felis. Sed dolor lectus, vehicula rutrum, venenatis et, fringilla vel, tellus. Curabitur mi. Donec ligula pede, vulputate vitae, bibendum ac, pharetra in, elit. Pellentesque et mauris ut pede mattis commodo. Mauris massa odio, egestas eget, luctus id, suscipit sit amet, velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse ac sem. Cras nec dolor a ipsum consectetur lobortis. In blandit erat. Fusce mollis ultrices ipsum.

Obligatory browser screenshot:

For more information, please have a look at Reflection Plugin web page.

Update (07/12/2008): I’m starting to think that this plugin can actually be an image effect plugin. Not only reflection, something like rounded corner effect can easily be done with Raphael, along with many other effects. The underlying work is basically to apply client side image effect by using class attribute values as meta data (hmm, shouldn’t future version of CSS support this?). Oh well, let’s see how Reflection Plugin goes.

comments

comments powered by Disqus