Update 21/01/2013 – There is now a javascript based WordPress plugin for adding Page Peels to your site. Take a look at it on Code Canyon.

UPDATE 09/10/10 – There is an updated version of the jQuery page peel script now available.

page_curlJust recently I needed a page peel script for a client. A look around the ‘net lead me to a script that seemed to do everything I needed it to, but it used the document.write method which I’m not a big fan of, and it all seemed a bit inefficient.

My client was already including jQuery in their pages so it made sense to rewrite the javascript using jQuery. This also has the added benefit of meaning you no longer have to include the script inside the body tag to get it work in IE7.

While we were testing with users I also spotted a problem with some earlier versions of flash not showing the pictures. The simple but strange solution for this was to use two large images, instead of one small and one large. If you’re not worried about users with old versions of flash you can just use a 100px x 100px image instead of two 650px x 650px images.

You can download the script here.

Or see a demo here.

To use this script you need to edit the peel.js file and put the link and image paths in that you want to use, then put the following in the head of your page:

<script src="/pathtojquery/jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="/pathtopeel/peel.js" type="text/javascript"></script>

That’s it. Just add those lines and the script does the rest. Obvisously change /pathtojquery/ to the path to jQuery for your site, and change /pathtopeel/to point to where you uploaded the peel.js file.