Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #3708

    I’m trying to add tabs to a page that utilize jQuery. However, the tabs do not work unless I remove the reference to the prettyPhoto.js file in the header. I have tried all day to figure out how to remove the conflict but am having no luck. Can you tell me why prettyPhoto.js would create a conflict with tabs?

    Also, if I remove the reference to the prettyPhoto.js file, the arrow that slides under the menu disappears. Why would the menu navigation have anything to do with prettyPhoto?

    Here’s a link to the page:


    I forgot to mention that I’m using the HTML version of the template, not WordPress. Thanks!



    download the latest version of prettyphoto here: and replace the old prettyphoto files in the theme folder with the new one. The old files aren’t compatible with jquery 1.5+ anymore.


    Dude, first of all thank you so much for your time and help. I downloaded the latest prettyphoto file and replaced the old one with it. However, there was no change. The jQuery tabs still do not function unless I remove the call to the prettyphoto script in my header section. Any other thoughts on what I can do. I’ve tried several tab scripts but can’t get them to work with prettyphoot.

    Below are the scripts I’m calling in my header section. I have tried removing them one-by-one several times to determine where the conflict is and it always comes back to prettyphoto.

    <script type=”text/javascript” src=””></script>

    <script type=’text/javascript’ src=””></script>

    <script type=”text/javascript” src=”js/jquery.validate.pack.js”></script>

    <script type=”text/javascript” src=”js/additional-methods.js”></script>

    <script type=’text/javascript’ src=’js/jquery.js’></script>

    <script type=’text/javascript’ src=”js/prettyPhoto/js/jquery.prettyPhoto.js” charset=”utf-8″></script>

    <script type=’text/javascript’ src=’js/cufon.js’></script>

    <script type=’text/javascript’ src=’js/Andika_Basic_400.font.js’></script>

    <script type=’text/javascript’ src=’js/custom.js’></script>



    try to remove this line:

    <script type='text/javascript' src='js/jquery.js'></script>

    It cause jquery to load a second time…


    That didn’t work either. The jQuery tabs still do not work unless I remove the prettyPhoto call. You should be able to see my source code if you go to the page I mentioned in the initial post. I have even completely stripped the page down and have added pieces one-by-one. Everything is fine until I combine prettyPhoto with the tabs. I’m completely baffled!

    Thanks again for your help!


    Firebug gives me an error because of this code line:


    I couldn’t find the tabs div id, only an ul with a class “tabs”. Try to change the line above to:


    Another thing you can try is to replace the “$” signs with “jQuery”.


    I tried both but still got errors. When I change #tabs to .tabs I get a b is undefined error. When I replace the $ with jQuery I get #tabs is undefined. Oh what a tangled web I have spun!


    I decided to search the web for an alternative tab solution that would not conflict with prettyphoto and finally found one. Thanks again for your time and help!


    Glad that you’ve found another solution.

Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘jQuery Conflict’ is closed to new replies.