|
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. Installation
Usage
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> ScreenshotsDefault reflection
Gradient reflection (best on a dark background)
Plugin settings page on WordPress admin
Reflection Types
This reflection is a direct mirror of the original image, with .5 opacity. The reflection height is identical to the original image. 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. 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
|
Sign in to add a comment
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!
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
I love this plugin, but how do you keep it from breaking after each reflection?
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.
is there a way to add 1 pixel of space between the image and the reflection?
on this page there were these two suggestions but I'm not sure where to add them.
http://www.pixelbox.net/2008/09/16/image-reflection-with-jquery/
img.reflected { margin-bottom: 2px }
reflection.style.marginTop = ‘2px’;
annakcallahan,
the only way to add that 1 pixel is by modifying displayDefaultReflection and displayGradientReflection functions in reflection.js file.
the URL you provided explained how to do it with JQuery and the code snippet is CSS. reflection plugin works differently, it uses SVG without JQuery and CSS.
If you're interested, I can prepare a patched reflection plugin with the additional 1 pixel. Just let me know.
That would be great! I would really appreciate it. Or, if it would be easier you could just tell me what to change in those sections.
annakcallahan,
For displayDefaultReflection, you need to modify line 21: this.raphael.image(this.image.src, 0, this.image.height - 1, this.image.width + 1, this.image.height).scale(1, -1).attr({opacity: .5}); change the '- 1' in 'this.image.height - 1' (the 3rd function argument) to '+ 0', '+ 1', etc API is here http://raphaeljs.com/reference.html#image
For displayGradientReflection, you need to modify line 27: this.raphael.rect(-1, this.image.height - 1, this.image.width + 5, this.reflectionHeight + 5).attr({gradient: gradient, stroke: 'none'}); change the '- 1' in 'this.image.height - 1' (the 2nd function argument) to '+ 0', '+ 1', etc
When you test your change, make sure you hit CTRL+F5 so that you don't get the cached javascript code.
Have fun experimenting. :)
Forgot to mention, the API for the change in displayGradientReflection is here http://raphaeljs.com/reference.html#rect
Thanks, that worked! One other question, I want to get my images to look like this:
http://blog.4culture.org/2009/08/artists-guiding-you-through-the-fourth-dimension/
where the fade ends gradually instead of a straight line. i have this one that i use through fireworks
http://www.gridlinked.info/reflections-made-easy-with-fireworks-cs4-commands/
Is there a way to use this javascript file to change yours so that it has a gradual fade out?
Thanks again, anna
i use this code in post (wordpress):
-- <a rel="attachment wp-att-87" href="http://test.com/?attachment_id=87"><strong><img class="size-full wp-image-87 alignright reflection" title="test" src="http://test.com/wp-content/uploads/2009/08/test.jpg" alt="test" width="230" height="173" /></strong></a> -- Reflection is working! But, alignright - NO!! How to deal with it?
Please, help!!