jQReflect

Ridiculously Simple Image Reflection for jQuery

Want to add some cliche reflections to your images? Want to do it with syntax that is really easy to understand? Check this out.

Couldn't load a picture of a tree frog. Couldn't load a picture of a tree frog. Couldn't load a picture of a tree frog.

Here's what you need to do to get this working:

  1. Include jQuery on your page.
  2. Include jQReflect on your page.
    <script src="./jquery.reflect.js" type="text/javascript" charset="UTF-8"></script>
    Note: You can download jquery.reflect.js from here.
  3. Call reflect(..) on a jQuery NodeList:
    $("img").reflect({
        startOpacity: 0.6,     // Value between 0 and 1
                               //     the starting opacity of the gradient 
                               //     for the reflection
        reflectionScale: 0.5   // Size of the reflection relative to the 
                               //     size of the image
    });

    Note: The argument object is optional. Also, you may want to use an image preloading mechanism before calling reflect() on an image.