Projects: bitpress image effect reflection wordpress
by Cliffano Subagio
9 comments
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.
Related Posts:
Is there a way to get users who don’t happen to have that Java script plugin to still see the reflections? I figure if only yourself can see the cool effects of images that it will not your readers much? (I installed it but I can’t see the reflections =( )
i love this plug in but is there no way to set the reflection as a background that text can appear on top of?
for example your demo of record covers would be a lot nice ifthe text wrapped around only the alum art and not its reflection
This plug-in is fantastic. The only thing is that it recreates entire height of image in reflection. This takes a lot of space on the page. It will be so nice if this can clip some part off in reflection. That’s the only reason why I’m back to old-school Photoshop method of creating reflections for images and then using those in website as normal website. It will surely save a lot of time if this plug-in can clip-off some part of reflection.
The plug-in is not working in Internet Explorer 8 unless the compatibility modus is set.
You better take a look at that befor the browser is out of bèta ;-)
Perhaps you can do something with the information in the URL:
http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx
Best regards