Reflection.js is a simple piece of javascript that can add some slick looking reflections to any image on your site. All you need to do is add class=”reflect” to the image. If you are using the K2 WordPress theme you can call reflection.js and the requisite prototype.js (assuming you have uploaded it into the K2 » js folder) by adding the following to the top of header.php:
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/prototype.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/reflection.js"></script>
PaulStamatiou.com runs on the Thesis Theme for WordPress
Thesis is the search engine optimized WordPress theme of choice for serious online publishers. If you’re a blogger who doesn’t understand a lot of PHP, Thesis will give a ton of functionality without having to alter any code. For the advanced, Thesis has incredible customization possibilities via Thesis hooks.
With so many design options, you can use the template over and over and never have it look like the same site. The theme is robust and flexible enough not only to accommodate a site like PaulStamatiou.com, but also to enable the site to run far more efficiently than it ever has before.
Stumble This
{ 1 trackback }
{ 10 comments… read them below or add one }
I just saw this a day or two ago… Nice post.
Thanks for the tip.
Great tip thanks.. Happy Holidays !
I feel so dumb now, always thinking it was part of the image. :) nice tip
Actually, some people do it in Photoshop… this javascript way is a little slow.
Maybe you should also mention that the Internet Explorer doesn’t like this effect. (I HATE this piece of software…)
My photoblog ” http://www.pulssart.yi.org/ ” use canvas effect and scriptaculous (web 2 style script) . But work only with safari and FF 1.5 Mac/pc …
1024 × 768. At work on my 1600 × 1200 flatscreen, however, it’s gorgeous and works very well. I don’t know how you would do it, but I guess it’s a question of drawing the content up when the resolution is smaller (or something which gives that effect).
Nice!
I saw excellent image reflection examples at
http://www.featurepics.com/Editorial/Image-Reflection-Special-Effect.aspx
I think neondragon.net script has been used
Anybody has the same problem like me? The reflection doesn’t show up when place an image on a div with rounded corner by curvycorner.js
Work very nicely without curvycorner.js ;-)