prettyPopin an alternative to popups

by: Stéphane Caron

Here's my solution for popins. It provides a nice way to display simple content or simple forms.

If you have any comment or ways to improve it, just leave me a comment!

Bellow you can see a demo of a gallery and single image.

Demo

Click one one of the following link for a demo of prettyPopin. You can load what you want in ajax as long as it is standard HTML. Please note that you cannot open image with it, to do you you can always use prettyPhoto.


Browser support

This plugin has been tested and is known to work in the following browsers

  • Firefox 2.0+
  • Safari 3.1.1+
  • Internet Explorer 6.0 (PC)
  • Internet Explorer 7.0 (PC)

This script is licensed under Creative Commons Attribution 2.5. So you can use it in all you projects even commercial ones. Donations are always welcome.

Download

Uncompressed version (Script: 7.2kb / CSS: 1.1kb)

Compressed version (Script: 4.5kb / CSS: 1.1kb)

Working example

Version history

  • 1.3: You can now navigate inside prettyPopin (paging), fixed a bug with forms not being handled properly, now works when jQuery is in noConflict mode.
  • 1.2: A custom callback can now be fired upon prettyPopin closing.
  • 1.1: The popin can now follow the scroll (optional), fixed a bug where the resizing of the box was not using the proper dimensions, the path to the "loading" icon can now be changed in the settings.
  • 1.0: Initial release of prettyPopin.

How to use

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>


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.

Donations

I've spent a lot of time to develop/support this script. You liked it? Feel free to donate!


© Stéphane Caron 2008