javascript - prettyphoto undefined is not a function - Stack Overflow|Programmer puzzle solving

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=".9.0/jquery.min.js" type="text/javascript"></script>
    <script src="//ajax.googleapis/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

Any ideas?

Dave.

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./ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"></script>
    <script src="//ajax.googleapis./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.

Any ideas?

Dave.

Share Improve this question edited Feb 11, 2015 at 10:57 asked Feb 11, 2015 at 10:40 Dave Morgan 211 gold badge2 silver badges6 bronze badges

btw, did you include prettyPhoto js ..? – Sudhir Bastakoti Commented Feb 11, 2015 at 10:43
Seems like it can't find the prettyPhoto.js file, then the prettyPhoto() function is undefined. Where are you including the prettyPhoto script? – Kangcor Commented Feb 11, 2015 at 10:43
It's included in the head tag <script src="<?php bloginfo('template_directory'); ?>/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script> – Dave Morgan Commented Feb 11, 2015 at 10:45

Add a ment |

1 Answer 1

Sorted by: Reset to default 2

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./ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://ajax.googleapis./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./ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Programmer puzzle solving

javascript - prettyphoto undefined is not a function - Stack Overflow

1 Answer 1

Articles related to this article

comment list (0)