WP Wetfloor
Current Version: 1.6a
Included Reflection.js Version:1.6
License: MIT License
Last update: Oct 5, 2006
Requirements: Wordpress 1.5 – 2.x
Updates Feed: 
WP Wetfloor allows you to add reflections (a.k.a. the wetfloor effect) to images on your Wordpress blog. This plugin is a WordPress wrapper for Cow’s Reflections.js.
Changelog
Version 1.6a (download):
Better quicktag bar support. Now works with rich-text editor as well! Using reflection.js v1.6.
Version 1.5b (download):
Bug Fix: Button not showing on the “Write Page” page, insert button only when the quicktags bar is shown.
Version 1.5a (download):
Added height and opacity options.
Version 1.0b (download):
No change in my code. I only upgraded reflection.js to version 1.5.
Version 1.0 (download):
First version.
Credits
WP Wetfloor uses code from Cow’s Reflection.js. P-man graphic drawn by Jon.
Installation
- Extract the archive into your plugins folder. A new folder called wp-wetfloor will be added.
- Log into your admin panel, click on Plugins and activate the plugin.
- A new button called “Wetfloor” will be added onto the quicktags toolbar.
Usage
Click on the Wetfloor button (not available on rich text editor), enter the height and opacity without the % sign. You can also leave them blank to use the default values (50% height, 50% opacity).
You can also enter the code manually, add class=”reflect rheightxx ropacityxx” to any img tag, where xx is the height and opacity in percentage.
For example,
<img class="reflect rheight80 ropacity40" src="abc.jpg" />
For advanced users:
If you want to use action-driven reflections, please refer to Reflection.js ’s documentation.
Browser Compatibility
Please refer to Reflection.js for the supported broswer list.
Demo
Default setting
The reflection can fade into different colours.
20% height and 80% opacity
70% height and 20% opacity
100% height and 100% opacity
{ 38 trackbacks }
{ 44 comments… read them below or add one }
← Previous Comments
Works great! Thanks!!!
i have a problem with this plugin, i’ve activaded the plugin but it doesn’t works, i don’t know why
i use de class=”reflect” after de please help me!
Can you show me where you used it?
Wonderfull.
Great plugin.
What a strange plugin, but still tis very kewl
great plug … my plugin list is growing.. thanks
just viewing this page in Mozilla but it doesn’t work. It works in IE though.
I tested it with Firefox 1.5.0.3 on Windows, OS X and linux and they all work fine for me.
Have you check the compatibility list?
Is your Firefox 1.5+?
Richard-
I had this happen in FF 2.0a2. Are you using a non-official mozilla release? That might be it.
Amazing I am using it now and it works great if you that stylish glass page feel!
Hey, I didn’t see this show up in my quick tags. Running WordPress 2. Any thoughts?
On your quick tags bar, do you see buttons created by other plugins?
Super plugin, I was thinking of adding this effect to my site, and here it is and easy to implement.
Thanks!
Cool plugin – a few things though:
reflection image needs to be resized if the original image is resized. Right now, it makes a reflection of the full-size image, and cuts off the reflection where the main image ends. To demonstrate this, put a 300px-wide image in a post and resize it to 150. Add the reflect class, and you’ll see what I mean.
Also along the same lines, the reflection image needs to carry the same properties as the original image, like alignment, etc. (we already talked about width). With the plugin as it is currently, it is impossible to have text wrapped around an image, as the reflection is not aligned, and the text is pushed below it.
Basically, both of these issues, and further issues down the line, can be solved if the reflection shared the same [img] properties as the original, except [height=] and [src=], of course.
If you don’t want to implement these fixes, let me know and I’ll pick up development of this plugin… Otherwise let me know and I can help continue the development on this site.
As stated above, this plugin uses Cow’s Reflection.js script to generate the reflection. You might want to repost your thoughts on his blog instead?
ah, ok. so this plugin was made to encapsulate the reflection.js script, but not as a development path…gotcha. I’ll repost.
I posted over there, and he also noted I was using an old version of the script – looks like the plugin is using v1.0, he’s up to v1.5 these days…
If you haven’t seen this already :
http://www.siuyee.com/2006/05/23/reflectionjs-15-out/
I don’t see it in my quicktags bar either, and in response to your question Siuyee, yes, several other plugins list themselves there.
Similarly, adding class=”reflect” without any additional options causes Safari to render some additional space below the image but it doesn’t show any reflection effect.
Any thoughts on how to debug this? I’m using your version 1.5a.
Thanks.
OK, mea culpa. A quick review of the JavaScript shows me that an existing window.onload was getting in the way. I’m now scripting image reflections and all is well.
Thanks.
If you can see the reflections on this page with Safari, then there is probably some conflicting JavaScript (like you said). It looks fine on my Safari.
As for the quicktags bar, I will look into it. Are you guys using the latest version of WordPress?
BTW, are you talking about the simple text-only editor or the rich text editor?
Wonderful..
I am using it now..
This is onw plug in that i give A+++
(and thanks for updating it)
I cannot use that one. Just didn’t fit into my ideas, but nice one for sure!
Hi, as other people have said there is a problem with QuickTags.
no matter what i try i can not get it to display the quick tag for this plug-in, i do have a few other plug-ins that use custom quick tags and thier fine.
i can however just add the “class=”reflect rheight60 ropacity40″” to the image and it works fine.
im using WP 2.x (was a default install on my new server not sure what version but do know its 2+ haha)
trying to display the tag in FireFox 1.5/2 and MSIE6/7
Are you referring to the bar in plain text mode or rich text mode? The plugin only adds a button to the plain text editor. It is using some pretty standard function to add itself to the quicktags bar, so I guess sometimes the quicktags bar might be broken by other plugins.
It works great..
Thank you SO much..
Thanks for this great plugin.
no matter what i do, i can’t get the button to show in my admin quicktag. I’m using WP2.0 too. I’ve turned off rich text and still it doesn’t work- ideas????.
Thanks for testing 1.6a! :tongue_kao:
Thanks! Works sweet!
really a simply great plugin!
i tried to use the wet floor plugin on images which are displayed side by side. but then the plugin always breaks the line so that each image appear in a single line.
does anyone else has the same problem? or is it the fault of my css?
I like the wetfloor plugin, you can see me using it on my two random pic galleries. It worked great until the dreaded IE7 browser update!
I liked to set a shorter 20 or 30% reflection so you see the effect without being overwhelmed and not loosing too much white space.
However, my visitors with IE7 complained about the first two lines of whatever’s linked below the reflection not being clickable anymore. It was confusing because the links are still underlined.
Someone finally pointed out the reflection was probably overlapping, and when I changed the reflection to 40-50% those links became clickable again.
So the plugin needs some kind of IE7 workaround to not overlap the content below, possibly a z-layering thing?
And can we get a round of applause for Microsoft serving up another crappy browser that forces workarounds and hacks?
I have a problem, please have a look at my Pics: http://www.romankeller.ch/blog/?page_id=756
Hi, does anyone know of a plugin or css that can do reflection for TEXT? Like for eg :
text here
Thanks.
Thank you for making such an easy plugin, i tried for hours to get a reflection before i remembered i was using wordpress,
silly wordpress
Have a fantastic day
Phillip
Nice plugin, thank you!
I’m finding the same problem. I want to use this – I really really do. But if images can only exist on their own line then it’s not as much use to me as I would have hoped.
Unless the two of us are doing something wrong?
Nice plugin!
Thanks from spain!
I have downloaded and uploaded the reflections.js file to every possible location on my server, including the content plugins directory as specified and I can’t get either reflections or wet floor (which I also downloaded and activated) to work!!! What the heck am I doing wrong??? I added
It doesn’t show the reflection!!!
What is the fix?? Anyone??
Blogge uses reflection.js in a different concept. Check the combination with prototype.js.
i have tried every version. The quicktags button never shows up. what is wrong?
It’s very beautifully.
well, i have a problem i could wish to solve, i installed the plugin but then an texot on the screen appeared : /* Plugin Name: WP Wetfloor Plugin URI: http://www.siuyee.com/projects/wp-wetfloor/ Description: WP Wetfloor is a WordPress wrapper for Cow’s Reflection.js, it adds reflections (a.k.a. the wetfloor effect) to images on your Wordpress blog. Version: 1.6a Author: Shirley Man Author URI: http://www.siuyee.com/ License: MIT License Tags: images, effect, wetfloor, javascript, reflection */ function wp_wetfloor_handler() { var isNum=/(^\d+$)|(^\d+\.\d+$)/; var imageurl = prompt(‘Location of image?\n(http://wet.com/floor.jpg)’, ”); if (imageurl) { var rheight = prompt(‘Height of reflection (without the %)?\nLeave blank for default.’, ”); reflectcode = ”; while (rheight && !isNum.test(rheight)) { rheight = prompt(‘Wrong input: Height of reflection (without the %)?\nLeave blank for default.’, ”); } if (rheight) { rheight = ‘ rheight’ + rheight; } var ropac = prompt(‘Opacity of reflection (without the %)?\nLeave blank for default.’, ”); while(ropac && !isNum.test(ropac)) { ropac = prompt(‘Wrong input: Opacity of reflection (without the %)?\nLeave blank for default.’, ”); } if (ropac) { ropac = ‘ ropacity’ + ropac; } reflectcode = ”; buttonsnap_settext(reflectcode); } }
and i cannot unninstall the plugin, so can you help me please!!
all help will be grateful
greeting : ryuhack