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:

posted by Div @ 8:15 PM  
11 Comments:
  • At 8:27 AM PDT, Anonymous Anonymous said…

    I tried pasting those 2 lines immediately before the </head> tag and got this error message:

    Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
    XML error message: Open quote is expected for attribute "{1}" associated with an element type "src".

     
  • At 8:28 AM PDT, Anonymous Anonymous said…

    PS, I did this in Blogger.

     
  • At 2:45 PM PDT, Blogger Div said…

    Hi Grant,

    I've made the change in the post itself.

    Replaced backquotes (which were incorrect) with single quotes.

     
  • At 7:30 AM PDT, Anonymous Anonymous said…

    Great effect i was looking for a long time for it how to do it, but i`m sorry but i added the lines and it is not working..
    Let me know if you update it..
    Thx
    Dadexter
    http://mixdiggerz.blogspot.com/

     
  • At 7:42 AM PDT, Blogger Div said…

    Hi Dadexter,

    I saw the html source of your website. You have placed the two script lines correctly before the closing head tag. However, just pasting these files will not work. You'll first need to:

    1. Download reflection.js from Cow's site
    2. Download enablereflect.js from my link (provided above)
    3. save these two files on a server (like googlepages)
    4. Put the url of these two js files in the script tag.

    It should work then.

    I'm looking for a way to host my js file somewhere so that everyone can just hotlink to it. I'll update this post when I'm done.

    Thanks all,
    Div

     
  • At 11:56 AM PDT, Anonymous Anonymous said…

    Cool script! Thanks for sharing =)

     
  • At 5:31 AM PDT, Anonymous Anonymous said…

    This comment has been removed by a blog administrator.

     
  • At 1:21 AM PDT, Anonymous ardianzzz said…

    WoW...! nice. it's work for me. thanks for the script..
    salute!

     
  • At 1:58 AM PDT, Anonymous ardianzzz said…

    The page you have requested could not be found. (404)

     
  • At 7:50 AM PDT, Anonymous BEBEN said…

    ]]>< /b:skin > before that add this .reflect {border:none;rheight:xxx%;ropacity:xxx%;clear:both;}

    And we just call it if want to the post a image with < img class='reflect' src=URLlinkUrpic > LoL

     
  • At 9:04 PM PDT, Anonymous andrea said…

    Thanx for the script! Job well done.

     
Post a Comment
<< Home
 
Track with co.mments
>
Previous Post
Archives
Links