Reflections
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)
Rate this solution
If you think this solution is useful — rate it up! Or dump it otherwise.
page_revision: 22, last_edited: 1243597708|%e %b %Y, %H:%M %Z (%O ago)
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.
Wikidot Team
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
Free Wikidot Applications · Your Shared Photo Gallery · Your Personal Blog
i cant seem to figure out how to get this to work. please help.
Rhombus Productions main | My Current Projects | Jokes!| Battle Ground
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".
Wikidot Team
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, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » 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, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
Anybody have an example of working code?
Exchange in the code above only the "Image" data with your picture.. this should work I think.
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
Thanks again Helmut,
I tried as you suggested without the last two lines:
But it says: "Sorry, no match for the embedded content."
The code block information is DIFFERENT from the Action!
please _ have a look on the "view source button" ( left side menu bottom..) - how this is done!
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
here is the correct code:
PLEASE - Notice THE "SPACE" INSIDE THE embbed "COM" of the src= command line!
If I try to edit the page - I get the old code block again!
What is happening here?
Put the space out and you camnnot save it into a code block!
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
When I use the code WITHOUT the space in "CO M" it displays the image but with no reflection.
NB: Once I navigate away from the page, it shows with reflection.
Have a look.
http://hobstarcs.wikidot.com/
This is a confusing article.
It works WITHOUT the space and the exact url location of the image is not necessary:
EDIT:
the code
is displayed as
within this forum thread when [[code]] is used.
In this corrected post, I used > @@[@@
When i used this code:
The image had reflection but was stuck on the left hand side… The result was the same when i used the centering code:
Any ideas why it might not be working??
Cheers
Ruben
RoogleNotes
Have a look:
(with YOUR code)
- Where is the picture stuck at the left side?
http://helmuti-pdorf.wikidot.com/test-reflection
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
The image starts to load (without refelction) in the center of the page, when it finishes loading the reflection is visible but the image moves to sit very close to the side navigation panel. I had a look at your link, http://helmuti-pdorf.wikidot.com/test-reflection and the result was the same. I'll see if it's just a problem with my browser…
Ruben
—-
RoogleNotes
I opened up the page using Internet Explorer and the page displayed fine, but it still persists using mozilla. I'm not sure how to get around it?
Thanks for your help.
Ruben
RoogleNotes
I changed my site page under mozilla - have a look!
I made 2 ways to create A CENTERED Image:
1. Used complex tables ( could be div's too) with 3 cells, in the centered cell is the image positined.
- play around with the borders ( I set them to 1 px for visibility) and the percentages of the width
2. Used simple table (||) and - this works in a simple way too.
3. Used the = character before the image tag - AND THE style attribute to the image tag:
style="margin: 5px auto" - thanks Gabrys!
Service is my success. My webtips:www.blender.org, www.zusi.de (Demo-Video)
Wollen Sie Wikidot helfen im deutschen » Handbuch ?
Thankyou so much for all the help!!! It's now working perfectly, i can't thank you enough. You've been so so helpful.
Regards,
Ruben
RoogleNotes