Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #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: http://pixellogix.net/siproutes/test.html

    #43398

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

    #43399

    Hey,

    download the latest version of prettyphoto here: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ 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.

    #43400

    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=”http://code.jquery.com/jquery-latest.js”></script>

    <script type=’text/javascript’ src=”http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js”></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>

    #43401

    Hey,

    try to remove this line:

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

    It cause jquery to load a second time…

    #43402

    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!

    #43403

    Firebug gives me an error because of this code line:

    $("#tabs").tabs();

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

    $(".tabs").tabs();

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

    #43404

    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!

    #43405

    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!

    #43406

    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.