prettyPopin documentation

Below you can find the complete documentation for prettyPopin.

If you are having problems with prettyPopin and need support, please come and ask your questions in our forums.

If you got here by mistake, don’t leave! The main prettyPopin page can be found here.

If you we’re not looking for prettyPopin, well too bad, but you can still read my blog here.

Setup

Nothing is easier to use. First build the content you want to include in prettyPopin in the same structure you would build any AJAX content.

Then include the jQuery library, prettyPopin javascript and the prettyPopin CSS in the head of the page(s) where you want to use prettyPopin.
jQuery can be download here

<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>

<link rel="stylesheet" href="css/prettyPopin.css" type="text/css" media="screen" charset="utf-8" />

<script src="js/jquery.prettyPopin.js" type="text/javascript" charset="utf-8"></script>>

Add rel=”prettyPopin” to any link you want to activate the prettyPopin feature

<a href="ajax/regular.html" rel="prettyPopin">Regular content</a>

* NOTE: The link need to point to the content you want to load

Then initialize prettyPopin.

<script type="text/javascript" charset="utf-8">

	$(document).ready(function(){
		$("a[rel^='prettyPopin']").prettyPopin();
	});
</script>

Customization

To customize the settings, you need to pass the values to prettyPopin, like so:

<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		$("a[rel^='prettyPopin']").prettyPopin({
			modal : false, /* true/false */
			width : false, /* false/integer */
			height: false, /* false/integer */
			opacity: 0.5, /* value from 0 to 1 */
			animationSpeed: 'fast', /* slow/medium/fast/integer */
			followScroll: true, /* true/false */
			loader_path: 'images/prettyPopin/loader.gif', /* path to your loading image */
			callback: function(){} /* callback called when closing the popin */
		});
	});

</script>

To link internally in prettyPopin (a paging for example), add rel=”internal” to the links you want to link inside prettyPopin.

<p>This is a normal bit of content <a href="page.html" rel="internal">this link will load in prettyPopin</a></p>

You can also close prettyPopin by adding rel=”close” to any link you want to close prettyPopin.

The content loaded in prettyPopin should have a predefined width, else the content may not render properly. To set the width you can define it when initializing prettyPopin like described in the previous step.