Categories
css featured html jQuery

Free jQuery page peel (updated)

There is now a javascript based WordPress plugin for adding Page Peels to your site. Take a look at it on Code Canyon.

The jQuery version of the page peel script has been very popular on SmartRedFox.com, and I’ve finally got round to making some updates and changes to it.

Since I wrote the original article I found this site, which seems to have the original Flash files for the peel effect, as well as a copy of the non-jQuery version of the files. So, if you want to edit the .fla files, or you don’t want to use jQuery to display the page peel you may want to head over there now.

Updates:

  • The most requested feature for the original script was for it to open the link in the same window. This is now a configurable option. (Note: I’ve changed the default to be that the link opens in the same window).
  • I’ve changed the default images to make it easier to create your own.
  • Stopped the dotted outline from appearing when you click on the advert.
  • Assorted other fixes.

To use the new page peel edit the peel.js file to match your set-up:

  • smartredfox.link_url – This is the full url (including http://) that you want users to go to when they click your advert.
  • smartredfox.newWindow – Set this to true if you want the link_url to be opened in a new window.
  • smartredfox.small_image – This is the full path to the image users see when the image loads.
  • smartredfox.big_image – This is the full path to the big image that appears when users roll over the page peel.
  • smartredfox.small_path – This is the full path to the small.swf file.
  • smartredfox.big_path – This is the full path to the large.swf file.

Then include the peel.js file and jQuery in the head of your website:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="peel.js" type="text/javascript"></script>

Download now View demo

If you have any feedback or feature requests please post them in the comments below.

[ad#ad-3]

12 replies on “Free jQuery page peel (updated)”

Hi there,

thanks for sharing. Do you mind sharing your modified flash-sources as well? I plan on making the image & flash sizes dynamically changeable and the orginal-sources produce flickering with your script.

Thanks!

H

Thanks a lot for your demo and explication, it’s really very useful and nice.
I have a question, when I download your small.swf and the big.swf files to my server, then change the small_path and big_path to local src, the peeling effect disappear.
I don’t know where the problem is. Can you pls. give me more information about this?

Thanks in advance !

Chenlley

How about placement options such as the other corners of the browser, and an option of leaving the ad stay open with a close button. Those would be some other nice features.

It seems Pageear have also added other options such as audio for open and close, along with flv playback. The complete list can be viewed at http://www.pageear.com/pagepeel-features.html

Chenlley – I’m glad you found it helpful.

What path are you putting in to the peel.js file? And what folders are all of your files in?

Jakes, these are some good suggestions – thanks. If I get a chance I’ll see if I can add these in to the flash file… I don’t think I’ll manage to compete with the pageear stuff, but my version is free for all uses!

Hi, I’ve just tried your method out, it works great, but is there any way I can make the smaller image a bit bigger, and the large one a bit smaller?

Will it be a case of scaling the 2 flash files to do it, then change their dimensions in the js script?

Thanks

Hi,

Great script. But as with Michelle, I need the smaller image or the entire corner to be a little bigger.

How do we go about doing this? Will it need an edit of the flash movies?

Thanks

Very cool. I have found out though, it only works if the peel.js is in the same directory as the page.

Hello admin,

if I change smartredfox.newWindow = false;
smartredfox.newWindow = true;

nothing is changed. The link opnd a new window also 🙁

Could you help?

Kind regards
Mattias

SORRY, I have made a mistake!
All is perfect and working

But one question I have:
What will be with users witch have disabelt java in the browser?
I `m loking for some possibilitys to get a fallback method

Thanks for help
Mattias

Hello Mattias,

Currently the Page peel is not java based but Flash based. That means it won’t work on any IOS devices (iPhones, iPads etc.), or newer Android devices.

I have written a version of the page peel specifically for the WordPress CMS system that doesn’t require Flash, and will work in most browsers from IE7 onwards (including iPads etc.) You can purchase this plugin from CodeCanyon.

I’m in the process of creating a non WordPress version of this now. If you want to find out more about this, get in touch with me via the contact form.

Thanks,
James

Comments are closed.