Pixelbox

NOTE: This isn’t working in the latest releases of browsers. Please let me know if you have updated or know of maintained versions of this code I can link to.

I have often used JavaScript to add reflections to images. Ideally this would be done server side, but often for quick presentations or mock ups it saves a lot of time.

I have previously used Reflection.js, which uses prototype. Since I now normally use jQuery I looked for a jQuery version of reflection, which I found here.

There is a big problem with the code though. If the images haven’t loaded then the reflection fails. Most of the time if you refresh the page it will work (thanks caching), but that’s not idea.

I have written a work around until the plugin is updated. The work around will run and check each image with the reflect class to see if it has finished loading (using the handy .complete). If it hasn’t it sets a flag to retry after a time out, if it has then we call the reflect function on it, and then remove the reflect class, so we don’t check it again next time. Tom improved this by using the .load function which removes the need for the time out, nice work, I have updated the examples. This works really well, especially when you have lots of large images, or users on slow connections. The code will also add the reflection to each image as it loads, rather than waiting for all of them to load.

<script type="text/javascript">
	$(document).ready(function() {
		$("img.reflect").each(function(){
			$(this).load( 
				function(){ 
					$(this).reflect({height: 0.3, opacity: 0.6} );
				} 
			);
		});
	});
</script>

Please let me know if you have any advice or improvements!

You can see a jQuery Reflection work around example here