prettyPhoto FAQs

This page is intended to help you resolve common mistakes that can happen when trying to setup prettyPhoto.

This is not the documentation, the complete documentation can be found here.

If you are not able to find an answer to your question(s), please feel free to come on the forums and ask it, I try to be as responsive as I can.

prettyPhoto is not loading, instead the image open in a new page

Make sure the jQuery script is included in the page
Make sure you initialized prettyPhoto by putting that script before the body closing tag.

<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		$("a[rel^='prettyPhoto']").prettyPhoto();
	});
</script>

prettyPhoto is not working in Internet Explore 6 or higher

If you’ve modified the settings, make sure you don’t have any trailing commas. A trailing comma is a comma after the last element of an array.

Good:

<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		$("a[rel^='prettyPhoto']").prettyPhoto({
			animationSpeed: 'normal', /* fast/slow/normal */
			opacity: 0.80, /* Value between 0 and 1 */
			showTitle: true /* true/false */
		});
	});
</script>

Bad:

<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		$("a[rel^='prettyPhoto']").prettyPhoto({
			animationSpeed: 'normal', /* fast/slow/normal */
			opacity: 0.80, /* Value between 0 and 1 */
			showTitle: true, /* true/false */
		});
	});
</script>

I am unable to open a website in an iframe

Please note that some website do not allow to be opened in an iframe. Websites such as Twitter and Facebook are know to block that. They do it for security purposes and to make sure their users are not victims of phishing.

I would like to only have one thumbnail to display a gallery

Please take a look at the API documentation.

I open input fields into prettyPhoto but cannot click into them.

This is because by default prettyPhoto takes over the keyboard to assign custom shortcuts. To make inputs clickable, you need to disable keyboard shortcuts, that can be done with the following setting:

<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		$("a[rel^='prettyPhoto']").prettyPhoto({
			keyboard_shortcuts: false
		});
	});
</script>