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.
Just 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.
[ad#ad-3]
14 replies on “Free Jquery page peel script”
Great great great job. Virtual high five!
This works fantastically! Much easier to implement than other scripts I’ve found.
I was wondering, could you supply the Flash source so that we can edit colors, reflection alpha, etc.? That would be an enormous help!
Many thanks!
Sorry Keith, as I said above it’s not originally my script or Flash file. I just took what was already there and rewrote the JavaScript – I didn’t make any changes to the Flash files at all, and I don’t have the original.
To use the peel effect more flexible and hide some internals from the lib-user, it might be worth it, changing the hard coded folder to the following:
smartredfox.container = $(“head > script[@src$=peel.js]”)[0].src.replace(“peel.js”, “”);
… this is only working, if you delete escape() around every smartredfox.container variable
Thanks for the great script! Having a few problems though – I’m using wordpress and have included jquery and peel.js fine, but nothing shows up on my site. Th peel.js file is in the same folder as the images/swf files so I assume I dont need to edit the smartredfox container variable? Any ideas how I can fix this – your demo works fine so it cant be my browser.
Thanks,
Dave
Would it be possible to change the BIG peel to 350px x 350px rather than the default 600? When I do I find that as I mouse over it doesnt peel properly untill the mouse hits the very corner of the screen. This is a great script and I would love to implement it on my site but before I can I need to resize it.
Also, is it possible to have the link open in the same window rather than a new one?
I spend a whole day to fix the issue on wordpress. but it doesn’t work. Tried to load javascript using wp_enqueue_scripti found document load event fires it does prepend the divs but doesn’t display page peel. On the same setup it works with a simple html file.
So in wordpress environment there is something wrong. Not sure if it conflicting with any other script but I tried to use jQuery instead of $.
Also i tried this on a fresh setup. You can try on http://indiwebhost.com/blog/
Non wordpress environment – http://indiwebhost.com/blog/wp-content/plugins/page-peel/
I’m also having the same problem, I have included the jquery script within the head of my shopping cart system. Yet nothing is showing up… very confusing!
It may be possible – I haven’t looked at the flash files in too much detail. The original .fla files are now available for download from http://www.marcofolio.net/webdesign/create_a_peeling_corner_on_your_website.html.
Lee, Bloglipi, Dave: The most important thing to check when including the file is the line that reads:
When I include this script on a wordpress page I put the files into wp-includes/js/ so for me this line reads:
Without this line put in I get the exact same symptoms you describe – I hope this helps.
This is excellent – just what I’ve been looking for! Thanks very much.
One small point – is there any way to preload the images, or at least hide the red x for missing images, as they flash briefly for the small and large images (along with borders showing the size).
It’s not for long, but is a little distracting.
Thanks for the great script!
is it possible to have the page peel from the left side and if so where can I figure out how to accomplish this. Thanks so much.