I followed all of the documentation on their site, but I can't get this to work.
I copied the script load into my head, activated the script before the body close, and put the prettyPhoto hook on my link.
But when I click on the link, nothing animates, it just opens the full size image the link is pointed to on it's own page.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<a href="superlow.jpg" rel="prettyPhoto"> sldjflkdjsf </a>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
</body>
</html>
It seems to me, either your scripts are not found or it's perhaps an encoding issue.
Are you sure that both your scripts are loaded? Because your code works for me here on Safari. NOTE: Please always refer to your browser type and version for such issues.
And you have a document encoding mismatch between your document (set as charset=ISO-8859-1) and your scripts and css (set a utf-8) which could cause problems. Make them both utf-8.
As long both of these things are sound, your example should work.