How to resolve conflicts between two JQuery lightbox scripts on a single page

  • Profile Image
    Divya 
    Asked on April 28, 2016 at 06:04 AM

    Hello,

    In my store i am having the jotform as a lightbox set just in right of the product image on "Request a Quote for this item" click , you can see here http://prairie-mountain-furniture.mybigcommerce.com/12-cubby-shelf/

    But if i use this jotform, my product images are not opening in the lightbox. And if are i remove the jotform, images get open in lightbox easily, which means that image lightbox get conflict with jotform lightbox.

    Please provide me a solution for this..

  • Profile Image
    Boris
    Answered on April 28, 2016 at 08:29 AM

    I see that your current embed code is this:

    <script src="https://form.jotform.me/static/feedback2.js?3.3.REV" type="text/javascript">
          var JFL_61102417389453 = new JotformFeedback({
            formId: '61102417389453',
            base: 'https://form.jotform.me/',
            windowTitle: 'Message Contact Form',
            background: '#e26324',
            fontColor: '#FFFFFF',
            type: 'false',
            height: 552,
            width: 700,
            openOnLoad: false
          });
        </script>

    Can you please try removing the number 2 from feedback2.js, so that your code becomes this:

    <script src="https://form.jotform.me/static/feedback.js?3.3.REV" type="text/javascript">
          var JFL_61102417389453 = new JotformFeedback({
            formId: '61102417389453',
            base: 'https://form.jotform.me/',
            windowTitle: 'Message Contact Form',
            background: '#e26324',
            fontColor: '#FFFFFF',
            type: 'false',
            height: 552,
            width: 700,
            openOnLoad: false
          });
        </script>

    This will load our "prototype" version of the lightbox, instead of the "JQuery" version of lightbox that feedback2.js is loading.

    Please let us know if this resolved the scripting conflict that existed on your page, and if both lightboxes are working correctly after making the change. Thank you.

  • Profile Image
    div
    Answered on April 28, 2016 at 09:44 AM
    I have done this,, but nothing happens,, even jotform view also get little
    disturbed,, and images are not opening in lighbox. I have tried it with
    noconflict code,, and also without that, but nothing happens. It is present
    rightnow in my code, you can check
    http://prairie-mountain-furniture.mybigcommerce.com/12-cubby-shelf/
    ...
  • Profile Image
    Kiran
    Answered on April 28, 2016 at 11:06 AM

    Since you are using BigCommerce, there is a possibility to have conflicts with the scripts on the web page. I've checked your web page and it looks like the change is not get effected on your web page. 

    Could you make sure that the change mentioned by our colleague is saved on your web page and let us know if the issue still persists? We will be happy to take a look again for you.

    Thank you! 

     

     

     

  • Profile Image
    div
    Answered on April 29, 2016 at 01:44 AM
    I have changed that "feedback2" to "feedback" in my script. You can visit
    products in my website now. It disturbs the designing of the form,, and
    also distrubs the product images. Please check here one of the product of
    my website:
    http://prairie-mountain-furniture.mybigcommerce.com/4-canoe-bookshelf/
    ...
  • Profile Image
    Chriistian
    Answered on April 29, 2016 at 04:15 AM

    I checked the product on your website and I noticed that you are using "feedback2". If I understand correctly, when you use "feedback" instead of "feedback2", the design of the form is changed?

    Can you please try adding this code on top of the Feedback code:
    <script type="text/javascript">  $.noConflict();</script>

    Please let us know if the issue still persists.
    Regards.