PHP Reflections

October 27th, 2006

I came across Easy PHP Reflections today which does a similar job to Reflection.js by adding the reflection effect or the "wet floor" effect to images on your website.

It’s a very nice script and does a similar job to Reflection.js but it does it on the server side. As I can see, both Javascript and PHP have their own advantages:

Javascript:

  • Automatically blends into background colour or even a background image.
  • The size of the script is compensated through not having to download extra images.
  • Offloads the processing onto the end user.
  • Keeps the code clean through unobtrusive Javascript.
  • Scripted reflections, and changing of opacity/height on the fly.

PHP:

  • Works in older browsers.
  • Can do things that a Javascript can’t, such as perspective.

The PHP script is really nice in that you can change the height and opacity of the reflection, similarly to my Javascript.

It got me thinking about a hybrid Javascript/PHP reflection script. It’d work similarly to Reflection.js does today – find all images with the class "reflect" and play around with the DOM adding a reflection.

It could have the best of both worlds – using the <canvas> tag for good modern browsers which support it (everybody but IE), proprietary CSS for IE and a fallback on server-side PHP reflections for browsers supporting neither. This would provide a unified way for anybody to easily and quickly add a reflection to an image and to have it work in any browser whilst keeping the bandwidth savings of client-side reflection.

In other reflection news…

It seems like every time I open a magazine or catalogue these days, there will always be an advert with a reflection/wet floor effect. I was browsing through the Tesco catalogue the other day; all the DVD titles had a reflection effect. In a leaflet from the Carphone Warehouse, there is a reflection effect under every single phone. Even McDonalds is adding a reflection effect to their Big Mac and fries.

Reflection.js hasn’t seen updates for a while. There have been some posts about links not working in IE and some patches have been posted in the comments. I just haven’t had the time to review all the patches in the comments and to make the required changes to Reflection.js because of a busy schedule. 

About the Author: Hi! I'm Ken. I've been using mobiles for over 10 years and technology for a lot longer! I'd love to hear from you.

Like this tip? Get the most from your mobile phone...

  • Discover brand new ways to use your mobile phone
  • Techniques to get more out of your mobile phone for less
  • Be the first to learn about new mobile technology

Enter your email to receive free regular Ken's Tech Tips:

  1. Reflection Randomness
  2. Reflection.js 1.6
  3. Reflection.js 1.7
  4. Reflection.js version 1.5
  5. Cross Browser Image Reflection

8 Responses to “PHP Reflections”

  1. # Stefanon 26 Feb 2007 at 9:29 pm

    Thanks for the link. The chance to change the opacity is great. I prefer the PHP version instead of the Javascript one.

  2. # Andrewon 12 Jun 2007 at 2:51 pm

    Hi,

    I have been playing with reflect.js on my test site http://s112580157.onlinehome.us/

    and have just noticed that for some reason while the reflection works in IE the links stop working…. for instance go to the site above and mouse over REWARDS / COUPONS – it will show a link URL in the bottom left but won’t let you click the image. In Firefox or on the mac it works fine (reflection + working link) – am I missing something or is this a bug in the implementation.

  3. # Dlilaon 29 Jun 2007 at 12:04 am

    Hi..love the reflection script. Works well with iframes to show on side your instructions while the image reflects on the right. Neat. Thanks a million. lila

  4. # Jonahon 17 Jul 2007 at 12:11 am

    This is a great script for sure!  One thing that I think would be an awesome addition would be that the reflection can be on a different layer so it doesn’t push content around, maybe an additional feature?  Thanks for the great script.

  5. # Rjon 25 Aug 2007 at 9:25 am

     

    Is it possible to have some instruction on the use of this script? I downloaded and extracted the file but I see no direction or instruction as to how I place it in the pade and how I choose an image.

    Thanks for the help 

  6. # Laurenthon 07 Nov 2007 at 3:39 pm

    Hi,

    thank you for this script, but I found a bug when you assign a reflection on an image with property align=right, the reflection is applyied but the new image apperead at left.

    Regards Laurent

  7. # Artakuson 29 Nov 2007 at 2:56 pm

    It not show any shadow on latest Firefox (2.0.0.10)

  8. # Mte90on 17 Jun 2009 at 12:18 pm

    I have made a web service that use this library.
    This is the link: http://www.mte90.net/index.php?lng=it&mod=ver&pg=index

Trackback URI | Comments RSS

Leave a Reply