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
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!
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 (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot 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 (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot 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
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 > @@[@@
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 (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot 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/
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 (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot 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 (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot 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 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 ?
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.
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 ?
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.
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?