0

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?

Dominik Hadl
  • 3,609
  • 3
  • 24
  • 58
smt
  • 1
  • 1
  • 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
  • @JNF so what can I do to work both the javascript? – smt Feb 25 '15 at 07:27

1 Answers1

0

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>
JNF
  • 3,696
  • 3
  • 31
  • 64