Reflections

By SquarkSquark

Description

This solution allows to make a reflection of every image inserted in your page. All you have to do is to embed the code below and then add a "reflect" class to an image and some additional parameters, like this:
[[image wikidot._logo.png class="reflect ropacity=33 rheight=50"]]

  • ropacityxx — change the opacity of the reflection (given in %)
  • rheightyy — change the height/lenght of the rflection (given in %)

Code

PLEASE - Notice the "SPACE" INSIDE THE embbed "COM" of the src= command line!

If you try to save the page - you get the old ( wrong!) code block again!

Put the space out and you cannot save the original src=… into a code block!

But you can use it in any Action !
(have a look on the "view source button" - bottom of left side menu - how this is realy done!)

[[embed]]
<script type="text/javascript" src="http://static.wikidot.co m/common--misc/reflection.js"></script>
[[/embed]]
[[image http://www.wdfiles.com/local--files/media:files/wikidotlogo_200_2.png class="reflect ropacity33 rheight50"]]
The same without the reflection:
[[image http://www.wdfiles.com/local--files/media:files/wikidotlogo_200_2.png]]

In action


wikidotlogo_200_2.png
The same without the reflection:
wikidotlogo_200_2.png

Centered version:

wikidotlogo_200_2.png

= [[image http://www.wdfiles.com/local--files/media:files/wikidotlogo_200_2.png class="reflect ropacity33 rheight50" style="margin: 5px auto"]]

Notes:

  • Only one embed per page (not per image) is enough for this to work
  • Preview does not enable reflections
  • You need a special trick to let the code work with centered images in Mozilla (see above)

Thanks to tsangk for this great snippet: conditional-blocks


text above inserted with:

[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]



Other snippets posted by Squark

Teachertube - 06 Jun 2021 03:45
Mp3 and video player - 21 Oct 2016 12:48
Voicethread - 16 Feb 2012 01:51
Vimeo - 16 Feb 2012 01:51
Slideboom - 16 Feb 2012 01:42
Schooltube - 16 Feb 2012 01:40
Playlist - 16 Feb 2012 01:31
Picasaweb - 16 Feb 2012 01:30
Ohloh - 16 Feb 2012 01:27
Js Kit Ratings - 16 Feb 2012 01:15
Gametrailers - 16 Feb 2012 01:03
Flickr Video - 16 Feb 2012 01:01
Dailymotion - 15 Feb 2012 00:42
Collapsible Block Unleashed - 15 Feb 2012 00:33
Blip TV - 15 Feb 2012 00:26


Rate this solution

If you think this solution is useful — rate it up!

rating: +29+x
Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License