Reflection - bitpress

Updated Dec 13, 2008 by cliffano

Reflection

Reflection is a WordPress plugin which applies reflection effect to images with 'reflection' as one of the HTML attribute class values.

This plugin uses Raphael JavaScript library to create the reflection effect. It only supports Firefox 3.0+, Safari 3.0+, Opera 9.5+, and Internet Explorer 6.0+. On other browsers, you'll only see the image without the reflection.

View Demo Download

Installation

Unzip reflection-version.zip to wp-content/plugins/ .
Go to 'Manage Plugins' page and activate Reflection plugin.

Usage

If you're using WordPress rich editor to add an image to your blog post, you only have to add reflection to the image class value via Advanced Settings tab on an image edit popup. Note that class values are space separated.
If you're typing up the HTML manually, then there are several rules you must follow:

img tag class attribute should have reflection value
img tag must have width and height attributes.

For example:

<p>
  <img class="alignnone reflection" src="blah.jpg" width="130" height="130"/>
</p>

<div>
  <img class="foo reflection bar" src="foobar.jpg" width="380" height="285"/>
</div>

You can configure gradient reflection via admin -> Settings tab -> Reflection menu.

Screenshots

Default reflection

Gradient reflection (best on a dark background)

Plugin settings page on WordPress admin

Reflection Types

Default reflection

This reflection is a direct mirror of the original image, with .5 opacity. The reflection height is identical to the original image.

Gradient reflection with pixels height

When you specify pixels gradient reflection height on the settings page, the reflection will take the specified pixels value. This reflection height is always the same between all reflected images on the blog.

Gradient reflection with percentage reflection height

When you specify a percentage gradient reflection height on the settings page, the reflection will take a specified percentage of the original image. This reflection height differs between images, depending on the height of each original image on the blog.

Changelog

Added auto div wrapper insertion. Removed div / p parent tag requirement.

Initial release.

Comment by dsterin, Apr 05, 2009

Hi, great plugin. If i'm working in Wordpress, is there a way that the reflection will also show the borders of the image? Thanks!

Comment by cliffano, May 01, 2009

Hi, sorry for the late reply, I just returned from a trip.

Reflection Plugin reflects the image itself, so if the border is part of the image, it will reflect the border. But if the border is part of the HTML/CSS, then unfortunately it won't.

HTH

Comment by iJakeOnline, Jul 07 (4 days ago)

I love this plugin, but how do you keep it from breaking after each reflection?

Comment by cliffano, Jul 09 (2 days ago)

iJakeOnline, do you mean like the second and third example images with reflection on the demo page? http://blog.qoqoa.com/2008/12/06/testing-reflection-plugin/

If so, you need to set alignment (left or right) on the image edit functionality. Otherwise, please provide more information on what you're trying to do :).

Thank you.