Here is the code in my <head>
:
<!-- Pretty Photo -->
<link rel="stylesheet" href="/css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
<script src="/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
Here is the image I am trying to load into the viewer.
<div class="altImage">
<a href="http://scoutsamerica.com/uploads/485604_10201093620571706_1239548317_n_716437.jpg" rel="prettyPhoto">
<img src="http://scoutsamerica.com/uploads/485604_10201093620571706_1239548317_n_716437.jpg">
</a>
</div>
I've dont this dozens of times and cant figure out why its not working. Any ideas?
Per the documentation:
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
Source: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/prettyphoto-faqs/
You will also need to import the standard jQuery library to use jQuery plugins!