Page Peel with Jquery Plugin

(No Ratings Yet)

Loading ...

1,389 views

A jquery plugin to implement a page peel effect to place ads on your site.

If you haven’t seen it by now, check out the upper right corner of this page, or check out the new page peel in the bottom left of this box!

Now, the one contained inside of the box has its limitations. You have to have enough room to display the full page out (this one’s set up as 500×500). Also, I’ve set the bottom padding of this box to 105px so I don’t cover any content. You could also indent the content 105px or just cover your content. Whatever floats your boat.

I guess I should show you a bit of code on how to accomplish this… here it goes.

Adding to Your Website

To add this you’ll need jQuery and jQuery.pagePeel.js, then add the following to the head of your document:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jQuery.pagePeel.js"></script>

<script type="text/javascript">

$().ready(function(){
$('pagePeel').pagePeel({}); }

</script>

<body>

<div id="pagePeel"> </div>
</body>

The area in bold is the DOM element you want place the page peel inside of. If you want to add it to the body, place it right under the opening ‘‘ tag. If you want it added inside a div, place it right after the opening ‘

‘ tag. Be sure that div’s position is set to relative in you CSS.

Options

options, options, options… That’s the main thing I think about when building plugins, and this one is filled with them. They go inside the open/close brackets The ones displayed are the default options.

SET WIDTH / HEIGHT OF SMALL AD
smallWidth: 120
smallHeight: 120
smallBG: ‘pp-src/smallBG.png’ // if you are not using flash, this is where your small ad image is located

SET WIDTH / HEIGHT OF INTRO
introWidth: 300
introHeight:300

SET WIDTH / HEIGHT OF BIG AD (SAME AS .SWF)
bigWidth: 500
bigHeight: 500
bigBG: ‘pp-src/bigBG.png’ // if you are not using flash, this is where your large ad image is located
bigAd: ‘pp-src/bigAd.jpg’ // if you are using flash, this is where your ad image is located
bigSWF: ‘pp-src/page-peel-big.swf’ // if your flash file is in a different directory

ADD LINK AND TARGET OPTIONS
adLink: ‘blank’ // this is where you insert a URL (i.e. http://www.smple.com) || if left ‘blank’ no link will be applied
adLinkTarget: ‘_blank’ // this is where you specify your target (i.e. ‘_parent’ or ‘_blank’)

SET POSITION OF YOUR AD
hPosition: ‘right’ // can use ‘left’ or ‘right’
vPosition: ‘top’ // can use ‘top’ or ‘bottom’

CHOOSE WHETHER TO USE FLASH OR NOT
flash: true

note: Only upper-right source .fla’s are included for both with or without an intro. There is also a lower-left for demonstration purposes. Feel free to edit the files to suite your needs, but remember to change the file path if you change the file name.
WHETHER TO USE INTRO ANIMATION OR NOT AND WHAT FILE TO USE
introAnim: false
bigSWFIntro: ‘pp-src/page-peel-big-intro.swf’ // this is the default file location for the intro animation file

note: The intro option is currently set up to only work in the upper-right hand corner, however can be changed if you edit the source .fla.

Demo: http://www.smple.com/pagePeel
Download: http://www.smple.com/pagePeel/pagePeel.zip
Source: http://smple.com/2008/12/15/jquery-plugin-page-peel/

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/stumbleupon_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/delicious_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/blinklist_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/furl_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/technorati_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/magnolia_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/google_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/myspace_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/facebook_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/sphinn_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/mixx_32.png

http://www.ajaxupdates.com/wp-content/plugins/sociofluid/images/twitter_32.png

Related Listings:

Page Peel Effect Using MooTools A great script back in May titled Simple Page Peel...
Jquery Link Control Script This is a inline sample, when you roll over the...
Jquery Timepickr Script Jquery.timepickr was created in a attempt to make the process...
jQuery Before-After Plugin To show the difference in the reconstruction project, they showed...
Ajax Page Fetcher This Ajax script lets you fetch another page’s content (both...