I took a look at your code. There were a few things that needed modification but I won't name them all.
- The
<img>
tag for the screen shot wasn't closed:<a href="..." rel="..."><img src"..." /></a>
- The 'hook' was being used improperly:
rel="prettyPhoto[]"
is used for multiple images.rel="prettyPhoto"
is for just one image. - Some of the CSS is redundant. Classes and IDs not being used (I won't go into that.)
$('#search_in_bar').empty().html();
Makes no sense; emptying the contents of the<div>
then asking for it's content.- Not linking the prettyPhoto CSS file--which is used for the popup. Basic Style
- Due to a lack of permissions,
pps.js
was not being loaded but was met with a 403 (Forbidden) error. - And most importantly, prettyPhoto was not being initialized.
<script> $(function() { $("a[rel^='prettyPhoto']").prettyPhoto(); $(window).scroll(function (){ ... }); }); </script>
Oh, side note:
<a href="large_here.png" rel="prettyPhoto"> <img src="smaller_here.png" /></a>
Working jsFiddle