By Squark
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
The same without the reflection:
Centered version:
= [[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
Voicethread - 16 Feb 2012 01:51
Vimeo - 16 Feb 2012 01:51
Teachertube - 16 Feb 2012 01:46
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
Mp3 and video player - 16 Feb 2012 01:25
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!
how can i apply this to the logo on the title bar which i am defining through css? thanks!
Hi,
I do not think so — you must add a special class to the image element which you cannot do for fixed template elements like the page title bar.
Michał Frąckowiak @ Wikidot Inc.
Visit my blog at michalf.me
You can "try" it on a separate page, do a screenshot of the result, crop the image with any image editing program and then add the the logo to the header. Hope this helps!
Piotr Gabryjeluk
visit my blog
I want to change direction of reflection How I can change it.
What do you mean to change direction? You want the direction to be e.g. on the top of the image? Nevertheless it is not possible. Reflections works only on the bottom, as the reflection usually is — reflecting from the surface.
Łukasz Tarka
Project Manager
e-mail: moc.todikiw|zsakul#moc.todikiw|zsakul
Need help? Send e-mail at moc.todikiw|troppus#moc.todikiw|troppus
There are a number of good tutorials on how to make reflections all over the web (try searching "gimp reflection" in Google). Making your own would give you more control over the direction and angle of the reflection.
Here's one tutorial using GIMP or Inkscape:
http://howto.nicubunu.ro/inkscape_gimp_reflections/
-Ed
Wikidot API - PHP · A PHP client and code samples for the Wikidot API
i cant seem to figure out how to get this to work. please help.
You just have to add [[embed]] ... [[/embed]] code on your page (wherever) and add parameters to the image you want to be with the reflection: class="reflect ropacity=33 rheight=50".
Łukasz Tarka
Project Manager
e-mail: moc.todikiw|zsakul#moc.todikiw|zsakul
Need help? Send e-mail at moc.todikiw|troppus#moc.todikiw|troppus
I am pasting the embed through /embed in the page and including the added material to the image yet it keeps telling me the embeding isnt recognized… any ideas?
ok well i took a different approach because the pasting was seperating the code… now its having some sort of, "stack overflow at line 2" issue.
Site & page: http://hopereborn.wikidot.com/start
The picture ( logo ?) on the side panel is fine!
Well done..
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
I couldn't get this to work either. Then looking at the actual source code for this page, I found the code snippet above is not the same as the code this page is using to display the example. Furthermore, when I try to show the correct code in a code box, it changes to the incorrect code shown above.
To get this to work, take the "v—15/" off the path in the embed statement.
So the src= should be src="hxxp://static.wikidot.com/common—misc/reflection.js"
(change hxxp to http. I did that so that it won't be a live link. No matter what I do, the v—15 keeps coming back when I use the code box)
Hope this helps those who want to get this to work.
The code is really wrong!
Thanks to mention this
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?