This page (revision-1) was last changed on 29-Nov-2024 16:16 by UnknownAuthor

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Page revision history

Version Date Modified Size Author Changes ... Change note

Page References

Incoming links Outgoing links
Reflection Style
Reflection Style

Version management

Difference between version and

At line 1 added 55 lines
!! Image with reflection effect.%%tabbedAccordion
%%tab-Introduction
! Introduction
This [JSPWikiStyle] allows you to insert images with reflection effect. It is totally useless, but great fun.Simply add a %~%reflection style around your images.
The reflection of the image appears below the image, and will fade into the background colour...
{{{
%%reflection
[home_vulture.jpg]
/%
}}}
%%(float:left;)
renders as:
[{Image src='wet_vulture.jpg' width='160' }]
/%
Reality check:
%%reflection-50-70
[{Image src='home_vulture.jpg' width='160' }]
/%
/%
%%tab-Usage
! Usage
Put a {{%~%reflection ... /~%}} around your pictures to add a reflection image at the bottom.
General format is :
{{{
%%reflection-<height>-<opacity>
..your images..
/%
}}}
* __height__ : 1..100. Optional height value of the reflection image, in percent of the height of the reflected image (default = 30%)
* __opacity__ : 1..100. Optional opacity or transparency value of the reflection image
(default = 50%, 100 means not transparent)
Reality check :
%%reflection-100-50
[{Image src='smart-logo.png' }][{Image src='smart-logo.png' }]
/%
/%
%%tab-Discussion
The [Reflection Style] is based on client-side javascript,
inspired by the great Reflection.js library at [http://cow.neondragon.net/stuff/reflection/],
adapted for [mootools|http://mootools.net] by Christophe Beyls ([http://www.digitalia.be], MIT license), and refactored for jspwiki.
The javascript contains [browser] specific code for IE and non-IE, and may not operate well on older browser.
It does not work in Safari < 2, [Opera] < 9 and Firefox < 1.5.
However, it gracefully degrades and leaves you page perfectly readable./%
%%
This page (revision-1) was last changed on 29-Nov-2024 16:16 by UnknownAuthorTop