简体   繁体   中英

No Conflict causing issues with other jquery

So I posted a few days ago trying to get help understanding how to implement no conflict. Thanks goes to @tdanielcox for helping me with that. I implemented it correctly, but it seems to be causing issues in a lightbox that was working properly before the no conflict was implemented.

Here is the page that uses no conflict.

http://michaelcullenbenson.com/MichaelCullenBenson.com/index2.html

The lightbox is in the hover state of each image, click the magnifying glass.

This page was before the no conflict was implemented, and has a functioning version of the lightbox, but the dribbble feed at the bottom breaks, without no conflict.

http://michaelcullenbenson.com/MichaelCullenBenson.com/index.html

If I remove jquery 1.6.1 the lightbox continues to function accordingly again. The only jquery file that works with the lightbox is (jquery.magnific-popup.js) but does not require the 1.6.1 jquery library so I'm confused why it effects it.

Here is the markup with jquery no conflict. Thanks so much for any help! No idea how much I appreciate it.

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


        <script type="text/javascript" src="js/jquery.innerfade.js"></script>


        <script type="text/javascript">
       $(document).ready(
                function(){
                    $('#news').innerfade({
                        animationtype: 'slide',
                        speed: 600,
                        timeout: 6000,
                        type: 'random',
                        containerheight: '1em'
                    });


            });
    </script>

        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="utilcarousel-files/utilcarousel/jquery.utilcarousel.min.js"></script>
        <script src="utilcarousel-files/magnific-popup/jquery.magnific-popup.js"></script>
        <script src="js/responsive-nav.js"></script>





        <script>
            $(function() {


                $('#fullwidth').utilCarousel({
                    breakPoints : [[600, 1], [800, 2], [1000, 3], [1300, 4],],
                    mouseWheel : false,
                    rewind : true,
                    autoPlay : true,
                    pagination : false
                });

                $('#fullwidth2').utilCarousel({
                    breakPoints : [[600, 1], [800, 2], [1000, 3], [1300, 4],],
                    mouseWheel : false,
                    rewind : true,
                    autoPlay : true,
                    pagination : false
                });

            });
        </script>

   < script >     
        $(document).ready(function() {
var movementStrength = 25;
var height = movementStrength / $(window).height();
var width = movementStrength / $(window).width();
$("#aboutarea").mousemove(function(e){
          var pageX = e.pageX - ($(window).width() / 2);
          var pageY = e.pageY - ($(window).height() / 2);
          var newvalueX = width * pageX * -1 - 25;
          var newvalueY = height * pageY * -1 - 50;
          $('#aboutarea').css("background-position", newvalueX+"px     "+newvalueY+"px");
});
});

    </script>

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
  <script>var $j6 = jQuery.noConflict();</script>

    <script type="text/javascript" src="dribbble.js"></script>  
    <script type="text/javascript">

    $j6(function () {

        $j6('#user').dribbble({
            player: 'MCBDesign', 
            total: 1
        }); 
    });

    </script>

Have you tried var $j6 = jQuery.noConflict(true); ?

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM