Projects: bitpress image effect plugins reflection wordpress
by Cliffano Subagio
7 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:
Thanks for letting me know about the issue on IE8. I’ll do some tests on that browser and apply the fix on future version of the plugin.
Straight from the source http://twitter.com/RaphaelJS/status/1073734071 .
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 =( )
Martinez, the plugin only works only on browsers with SVG support and JavaScript enabled. Otherwise, users would see the normal image without 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
Unfortunately the purpose of this plugin is to simply create an image reflection effect, nothing else.
Having said that, writing text on top of the image using SVG is possible.
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