Jquery conflict!

[benham]

Hi!

See here:
http://dev.tim-spicer.com/dev.html

PrettyPhoto was working great until I added a jquery 'slide-to-anchor' function. Now, when I visit the site in Safari, prettyPhoto stalls when loading the content.

Any ideas?

Many thanks

Ben

[VIPStephan]

I don’t know how often I’ve answered such issues already but if you had used the search you might have come across one of these answers because it’s always the same: Don’t include the jQuery library more than once in your site.

Your code looks like this:

<script src="/js/04/jquery-1.6.1.min.js"></script>  
<script src="/js/04/functions.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>

You have two versions of the jQuery library there which leads to conflicts. Use the latest version and move it to the top, so that it is the first thing loaded by the browser.

[mimosatti]

Several jquery libs included could be done, unfortunatelly, by external added snippets, such as widgets.

Use "jQuery" instead of "$" and invoque the jQuery.noConflict() in the begging of your jQuery code.

[VIPStephan]

Originally Posted by mimosatti

Several jquery libs included could be done, unfortunatelly, by external added snippets, such as widgets.

If the widgets are coded properly then they aren’t doing this (or are checking before including, respectively), and if they aren’t coded properly they shouldn’t be used. However, the HTML in the OP’s link doesn’t look like an installed widget but like manually copied and pasted (as all similar issues I’ve answered here so far). The noConflict function should only be an exception and the very very last resort if nothing else is possible. Always try to avoid issues in the first place instead of superficially fixing them with more code.

[benham]

Thanks for your tips!

I'm pretty sure it actually has nothing to do with jquery; I've isolated the problem to this line of code here:

<a href="images/fullscreen/holder.jpg" rel="prettyPhoto[pascoe-vale]" title="GAFFNEY STREET, PACOE VALE .<br><br>...

When I remove 'title=""' and its contents, prettyphoto loads just fine.

Any more thoughts?

[VIPStephan]

You can’t have HTML inside an attribute value, only text is allowed. Check your HTML and fix any possible errors.