This javascript, provided by Cow’s Blog, produces a reflection at the bottom of an image giving it a “wet floor” look.
 |
 |
Version 1.9 (check author’s site for newer version)The reflection.zip file contains several files. If you unzip the file to a local directory, you can double-click the readme.html file to read instructions on using the script with standard HTML pages. Also included is a test page and test images. After unzipping the file, you will need to upload the reflection.js script file to your site (this is the only file required to be on your site).
To access the script on your page, enter the following code into a code object with the code placement set to “Header” or use a custom header (Page Editor’s Header tab).
<script type="text/javascript" src="reflection.js"></script>
This script works on any image contained on your page with the class name of “reflect”. You can add this class name by clicking the desired image on your work page to make it the active object, then open the Geometry Editor to the Options tab. At the bottom you will see a data entry field labeled Code. Enter the following into this field:
class="reflect"
and save the change.
If you notice that your image is distorted when you preview/publish, then you may need to uncheck the Options—>Project Objects—>Advanced tab setting of “Set <img> as 100% width/height of object <div>“.
In addition to the mandatory class name of reflect, you may use either or both of two optional class names. The first is “rheightHH” where the HH represents the percentage of the image height to be used for the reflection and the second is “ropacityBB” where BB represents the percentage of opacity used for the reflection. These class names can be combined as needed, e.g.:
class="reflect rheight20" or
class="reflect ropacity40" or
class="reflect rheight80 ropacity70"
You can also combine other SiteSpinner tools with the reflected image. The example below shows the script being used with images and a rectangle shape with shading, both a colored background and an texture image. Because the reflection is transparent, the shading effect shines through.
Contact the LowTechGeezer
VM User's Forum
Bruceee's Sandpit
Webmaster's Corner
Other Useful Sites
That’s a bummer but at least I now know I’m not crazy. Maybe they’ll fix that with a new revision. Will try the PHP. We’re with Windstream for our site and they seem to be very current on most issues.
Thanks for your help.
After some testing with your HTML code, it appears that the reflections,js script is not compatible with the SiteSpinner Special FX code.
If you are only using the SS Special FX for the text links, those can be converted to use CSS in conjunction with the link hover state (Page Editor->Links, Fonts).
There is also a PHP version of the script in the PHP section, if you have PHP available on your site.
Upgraded to the latest version of SS (L) and now none of this works. Starting from the beginning – upload image, change class to “reflect”. Copied Reflection script into preview file and verified it through “options/preview options/locate folder/…” – it shows up with other files. Uploaded the script to my site via embedded file option.
Now doesn’t show in preview and does work at the site. It’s on the about page if you care to look.
You will also need to upload the script to your web site. This can be done is SS by clicking the Embed File/Media tool button and using Publish File type. Locate the script file on your hard drive using the “Filepath” button and when you Publish SS will upload the file for you.
Or you can use an FTP program and do it manually.
I spoke too early. It worked fine when I “preview” the document but doesn’t work when I publish. Tried a little of everything to get it publish but no luck.
Thank you once again. I did, however, have to reverse the code as follows to get it to work.
I looked at the code for this page and made the adjustment.
I’m unclear what you mean by “my Sitespinner Pro V2 folder.” If you mean your Program Files folder, then that is the wrong place. From within SS, use the main menu bar Options->Preview Options option and go to the Preview tab. There you will see a section labeled “Locate the Folder for Preview Temporary Files”; the folder shown is your preview directory. This is where the script should be placed.
OK
I put the reflections folder which has the script in as a sub folder in my Sitespinner Pro V2 folder, added a jpg file with the geometry class set to “reflect” and enter the script from above in a header code.
zip
What am I doing wrong?
Unlike other scripts that you include in the
section of your page, this script is contained in a separate file and is designed to be placed in a directory on your site. It is then included onto your page via the script statement shown in the tutorial.To use the script when you preview the page, you should put the script file in your preview folder.
Larry:
What do you mean by this terM:
“upload the reflection.js script file to your site”
Does this mean I copy the code to my sitespinner program directory?
Terry
What do you mean by: The script must be positioned before the closing tag?