CODEWITHSUNDEEP
javascriptjqueryhtml
Innovaxis
Innovaxis

Reputation: 41

prettyPhoto Not Working - Error: Not a Function

I'm having some issues with prettyPhoto on one of my clients website. Here is the link for reference: http://www.browardmicrofilm.com/pages/kodak-vizit-essential.html

I've used prettyPhoto on multiple other websites without issue. However for some reason, this website just doesn't want to perform the script properly. Instead of opening an image in the lightbox clone, it simply opens it in a new page. Perhaps it has something to do with the hosting but either way, wanted to see what professionals like you think!

I'm using Firefox 26 (Mac version) and I used Firebug to determine the error:

TypeError: $ is not a function
$(document).ready(function(){

I've tried numerous solutions, including one that made me change "$" to "window.jQuery and then for some reason the next line in the code creates the same error.

Here's the my code for those of you that wish to skip the entire page source code:

In my header:

<link href="../prettyPhoto.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>

The final script just before the closing body tag:

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
    $("a[rel^='prettyPhoto']").prettyPhoto({
    theme: 'light_rounded',
});
});
</script>

I know my links are good, which is why I'm not including them.

Upvotes: 1

Views: 8609

Answers (4)

Innovaxis
Innovaxis

Reputation: 41

Ultimately I abandoned the prettyPhoto javascript and went with an alternative. Lightbox 2.0:

http://lokeshdhakar.com/projects/lightbox2/

It works just as I'd like and no problems.

Upvotes: 1

tdmartin
tdmartin

Reputation: 251

Vanilla jquery needs to be declared before any library built on top of it

<!--first, jquery-->
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
<!--then the rest-->
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>

Upvotes: 6

user2672373
user2672373

Reputation:

Make sure that jQuery is loaded before the plugin is loaded.

<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>

Upvotes: 1

JerryHuang.me
JerryHuang.me

Reputation: 1790

Error below is saying that jQuery is not loaded.

TypeError: $ is not a function
$(document).ready(function(){

Check your resources, my guess is that your paths are case sensitive and libraries are not being properly loaded.

<script type="text/javascript" src="../Scripts/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="../Scripts/jquery-1.6.1.min.js"></script>

Check your resources.

Upvotes: 1

Related Questions