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!!