wet_wetfloor is a Textpattern plugin easing the use of Cow’s reflection.js. Reflection.js adds a modern glossy effect to all images, as seen on many “Web2.0” style sites on Apple’s iPod adverts trails.
Usage
Include <txp:wet_wetfloor_script /> to load the script somewhere in your page, either in your template’s <head> element or anywhere else above the first instance of <txp:wet_wetfloor>.
Embrace areas where the effect will be applied to <img> tags with <txp:wet_wetfloor> ... </txp:wet_wetfloor>. Additionally, you can specify the reflected image’s height and opacity by two optional attributes:
<txp:wet_wetfloor height="20" opacity="70"> <img src="/images/4.jpg" /> p. an interstitial paragraph. <txp:article_image /> </txp:wet_wetfloor>
Required attributes
None.
Optional attributes
| attribute | description | default |
|---|---|---|
| height | Reflection height as percentage of original image size. | 50 |
| opacity | The reflected image’s opacity in percent. | 50 |
Sample
You can use simply any method to produce <img> elements, either by Textile, HTML, or any Textpattern tag. As long as they are surrounded by <txp:wet_wetfloor>...</txp:wet_wetfloor>, the images will get their feet wet.
<txp:wet_wetfloor_script /> p. *images with reflections (c) sxc.hu* <txp:wet_wetfloor> <img src="/images/152.jpg" alt="tear drop" /> <txp:image id="153" /> !/images/154.jpg! </txp:wet_wetfloor>
images with reflections © sxc.hu
Licence
This plug-in is released under the Gnu General Public Licence.
Download
Get it here: wet_wetfloor.txt.
Resources and Relateds
Express your suggestions, report bugs and discuss enhancements in this thread in the Textpattern forum.
Change log
| Date | Version | Notes |
|---|---|---|
| 2007-03-02 | 0.1 | Initial public release |
| 2007-10-13 | 0.2 | Use reflection.js 1.7 |