| Friday, April 11, 2008 |
| Reflection.js: Blogger implementation |
Hey friends,
Reflection.js is a cool script to add reflection to your images. See it in action [here].
Generally, to enable reflection one has to add class=reflect to each of the img tags in your post. Now, we can't go back and change this on all the posts that we're been putting up for years, can we? Moreover, we wouldn't want this class attribute to be part of the feed that we're syndicating - how will the poor RSS readers know what this class means?
To obviate this issue, here is a enableReflect.js implementation that adds the class attribute at the time of page load and triggers reflection after that. Thus, the reflection feature becomes a part of the website meta-data and is not tightly coupled with the site posts themselves. Additionally, if you want to remove this feature or want to change to something new that comes up in the future, all you'll need to do is to change the blog template!
To have reflection on all your blogger posts, have these two lines before </head> tag in your blogger template.
<script src='http://location/reflection.js' type='text/javascript'/>
<script src='http://location/enableReflect.js' type='text/javascript'/>
That’s it, just these two lines...no other changes :)
Get your copy of enableReflect.js from here:
EDIT: just add this line and you're done :)
<script src='http://divyaratna.googlepages.com/ReflectOneZ1.js' type='text/javascript'/>
If u like it, please send me a note. If you don't, then let me know why? (ya, really!)
Cheers,
Div
Updates:
-removed alt text that was previously added.
-Updated the string above: the tag values are enclosed in single quotes (not backquotes). Each line ends with a />. This makes it XML compliant for blogger.
-Hosted the javascript file in my Google pages account. The reflection 1.9 code is embedded in the blogger code.Labels: Tech |
posted by Div @ 8:15 PM  |
|
|
|
