Search code examples
jqueryjquery-pluginsconflict

on page trigger conflict with jquery 1.9


I'm using the reveal modal plugin and have set it to load automatically on page open with a cookie activated, and it works great. It runs jquery v1.6. I have to implement it onto a page with Nivoslider which uses v1.9.

When put on the page with Nivoslider the trigger to open on page load now doesn't work anymore - but reveal on click still works - so there isn't really a conflict between 1.6 and 1.9, just it no longer opens on page load.

If I remove the link to 1.9 the trigger works again, but Nivoslider obviously doesnt. Is there a work around for this? Code below if you need to see it. Thanks...

<link rel="stylesheet" href="popup/reveal.css"> 
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.min.js">/script>
<script type="text/javascript" src="popup/jquery.reveal.js"></script>
<script type="text/javascript" src="popup/jquery.cookie.js"></script>
<script type="text/javascript"> 
jQuery(document).ready(function(){ 
if (jQuery.cookie('sale') != '1') { 
 jQuery('#myModal').reveal() 
    jQuery('#myModal').trigger('click'); 
    jQuery.cookie('sale', '1', { expires: 3}); } 
}); 
</script>  

<script type="text/javascript" src="slider/scripts/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="slider/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
   effect: 'fade', 
   animSpeed: 700, 
   pauseTime: 4000, 

});
});
</script>

Solution

  • Why are you loading 2 versions of jquery try this,

    <link rel="stylesheet" href="popup/reveal.css"> 
    
    <!-- Use only the new version only like 1.9.0 -->
    <script type="text/javascript" src="slider/scripts/jquery-1.9.0.min.js"></script>
    
    <script type="text/javascript" src="popup/jquery.reveal.js"></script>
    <script type="text/javascript" src="popup/jquery.cookie.js"></script>
    <script type="text/javascript"> 
    jQuery(document).ready(function(){ 
    if (jQuery.cookie('sale') != '1') { 
     jQuery('#myModal').reveal() 
        jQuery('#myModal').trigger('click'); 
        jQuery.cookie('sale', '1', { expires: 3}); } 
    }); 
    </script>  
    
    <script type="text/javascript" src="slider/jquery.nivo.slider.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {//use document ready instead of windows load function
       $('#slider').nivoSlider({
          effect: 'fade', 
          animSpeed: 700, 
          pauseTime: 4000, 
       });
    });
    </script>
    

    Note if it not works the use the jquery migrate plugin, there are many functions which are removed in jquery 1.9 version