Where To Insert Jquery Script NoConflict

  • Profile Image
    humbuckermusic
    Asked on July 31, 2013 at 10:23 PM

    Presently, my website uses jQuery for my items' multiple images as well as "tabbed content".

     

    Here is how it is supposed to look:  http://www.humbuckermusic.com/dr-z-antidote-red.html

    I have created an image that pulls up a jotform lightbox form and it works well, however, when it's enabled, the tabs and images no longer work properly:  http://www.humbuckermusic.com/dr-z-antidote-black.html

     

    I understand the fix is using : $.noConflict();   --- Problem is, I just don't know where to place it.

    My form script is:

    <script src="//www.jotform.com/min/g=feedback" type="text/javascript"> new JotformFeedback({ formId:'32088022600846', base:'http://jotform.co/', iframeParameters: { 'referrer': document.title}, windowTitle:'Stock Notify Request', background:'#8ec69f', fontColor:'#112244', type:false, height:550, width:420 }); </script> <a class="lightbox-32088022600846" style="cursor: pointer; color: blue; text-decoration: underline;"><img src="//lib.store.yahoo.net/lib/humbucker/notify-stock.jpg" border="0"></a>

     

    Any ideas?  Thanks!

     

     

  • Profile Image
    EltonCris
    Answered on August 01, 2013 at 02:37 AM

    Hi,

    Here's how to fix it.

    Find this codes in your page.

     

    <script type="text/javascript">$(document).ready(function(){var obj = $(".tabinfomain").tabbedInfo({firetab:0});});</script>

    <link rel="stylesheet" type="text/css" target="_blank" href="http://lib.store.yahoo.net/lib/humbucker/sc-cte4-styles.css" rel="nofollow noopener" rel="nofollow"></link><script type="text/javascript" src="//lib.store.yahoo.net/lib/humbucker/scprettyphoto.js"></script>

    <script type="text/javascript">$(document).ready(function(){$("a[rel^='prettyPhoto']").prettyPhoto({animationSpeed: 'normal', /* fast/slow/normal */padding: 40, /* padding for each side of the picture */opacity: 0.7, /* Value betwee 0 and 1 */showTitle: false,allowresize: true, /* true/false */theme: 'light_rounded', position: 'left', insetsize: 35, callback: function(){}});});</script>

     

    Replace every $ with jQuery, that should fixed it. For your reference: http://learn.jquery.com/using-jquery-core/avoid-conflicts-other-libraries/

    Here's a working demo: https://shots.jotform.com/elton/251136_working_demo.html

    No need for the noConflict code FYI. :)

    Thanks!

  • Profile Image
    humbuckermusic
    Answered on August 01, 2013 at 09:09 AM

    Amazing!  This is some of the best support I've ever seen.  Thank you so much!  I have one other separate issue (I'll start another thread), but if that get's resolved, I'll be upgrading my account.

    Thanks again!

  • Profile Image
    jeanettebmz
    Answered on August 01, 2013 at 11:28 AM

    We appreciate your words and great feedback towards Elton and the Support Staff

    Cheers!