prettyphoto undefined is not a function
I'm attempting to install prettyPhoto lightbox on my site and I keep getting them same error. The following code in the console generates this error
"undefined is not a function"
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto();
});
</script>
Line 18
I've tried it in the footer and the head, both cause the same problem and the lightbox doesn't load.
Here's the files in my head tag...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
My site is www.jessicadraws.com
Any ideas?
Dave.
Answer
Your page loads 3 versions of jQuery. This is likely causing issues with other plugins. Pretty Photo is loading fine - it's just loading onto jQuery 1.9
I can see this by running this in the devtools:
var jquery162 = $.noConflict(true);
> undefined
$.fn.jquery
> "1.9.0"
$.prettyPhoto
> Object {version: "3.1.5"}
To fix this won't be simple unfortunately, you'll need to decide which version of jQuery you are using and stop loading the rest.
For reference in <head> you are loading:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
PrettyPhoto is loaded just after these, in the head.
In your <body>:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>