jQuery conflict using magnific popup gallery

Question

I am using two versions of jQuery on the same page.

Here they are:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

jQuery 1.4.2 is required for scrolling horizontally on website. jQuery 1.9.1 is required for magnific popup gallery.

Here is the javascript code for magnific popup:

<script>
                        $(document).ready(function() {
                        $('.popup-gallery').magnificPopup({
                        delegate: 'a',
                        type: 'image',
                        tLoading: 'Loading image #%curr%...',
                        mainClass: 'mfp-img-mobile',
                        gallery: {
                                enabled: true,
                                navigateByImgClick: true,
                                preload: [0,1] // Will preload 0 - before current, and 1 after the current image
                                },
                        image: {
                              tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
                              titleSrc: function(item) {
                                return item.el.attr('title') ;
                              }
                            }
                         });
                        });
                    </script>

Withe the all code above the horizontal scroll works but not the magnific popup.
How can I fix this?

use should not use same library two versions , its not recommend. — Pushker Yadav, Feb 25 '15 at 07:02
You need [noConflict](http://api.jquery.com/jquery.noconflict/). See [another answer](http://stackoverflow.com/a/1566644/1305911) — JNF, Feb 25 '15 at 07:06
@JNF I tried that link before posting this error. Its not working. — smt, Feb 25 '15 at 07:08
@PushkerYadav I need to use both versions. I do not have a choice. — smt, Feb 25 '15 at 07:09
1. That is not mentioned in your post. 2. Try making it work instead of looking elsewhere. Currently, the second library you import overrides the first. If you reverse the order of the ` — JNF, Feb 25 '15 at 07:12

score 0 · Answer 1 · answered Feb 25 '15 at 13:09

Insert a noConflict script between loadings of jQuery

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">var $9 = $.noConflict(true);</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Then, in magnific code use $9 instead of $ for jQuery reference.

<script>
   $9(document).ready(function() {
      $9('.popup-gallery').magnificPopup({
          delegate: 'a',
          type: 'image',
          tLoading: 'Loading image #%curr%...',
          mainClass: 'mfp-img-mobile',
          gallery: {
             enabled: true,
             navigateByImgClick: true,
             preload: [0,1] // Will preload 0 - before current, and 1 after the current image
          },
          image: {
          tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
          titleSrc: function(item) {
             return item.el.attr('title') ;
          }
       }
    });
 });
</script>

jQuery conflict using magnific popup gallery

1 Answers1