nivoslider and pretty photo conflict
Hi
I am trying to get nivoslider and prettyphoto gallery working together, currently only the prettyphoto works. I have tried using jquery version 1.7.2, 1.8.3 and 1.10.1 and nothing seems to work. I tried noconflict as well but that didn't work either unless I didn't do it right, below is my coding
in header.php I have the following
in the index.php I have the followingCode:<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> jq183 = jQuery.noConflict(true); </script> <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" /> <script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script> <!-- Include the theme stylesheet in the <head> section --> <link rel="stylesheet" href="css/default.css" type="text/css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script src="js/jquery.quicksand.js" type="text/javascript"></script> <script src="js/jquery.easing.js" type="text/javascript"></script> <script src="js/script.js" type="text/javascript"></script> <script src="js/jquery.prettyPhoto.js" type="text/javascript"></script> <link href="css/prettyPhoto.css" rel="stylesheet" type="text/css" />
Can someone help point me in the direction of where I am going wrong with it, thank you in advanceCode:<div class="slider-wrapper theme-default"> <div id="slider" class="nivoSlider"> <img src="images/slideshow/banner2.jpg" alt="" /> <img src="images/slideshow/banner1.jpg" alt="" /> <img src="images/slideshow/banner3.jpg" alt="" /> </div> </div> <script type="text/javascript"> jq183(window).on('load', function() { jq183('#slider').nivoSlider({ effect: 'random', // Specify sets like: 'fold,fade,sliceDown' slices: 15, // For slice animations boxCols: 8, // For box animations boxRows: 4, // For box animations animSpeed: 500, // Slide transition speed pauseTime: 3000, // How long each slide will show startSlide: 0, // Set starting Slide (0 index) directionNav: true, // Next & Prev navigation controlNav: true, // 1,2,3... navigation controlNavThumbs: false, // Use thumbnails for Control Nav pauseOnHover: true, // Stop animation while hovering manualAdvance: false, // Force manual transitions prevText: 'Prev', // Prev directionNav text nextText: 'Next', // Next directionNav text randomStart: false, // Start on a random slide beforeChange: function(){}, // Triggers before a slide transition afterChange: function(){}, // Triggers after a slide transition slideshowEnd: function(){}, // Triggers after all slides have been shown lastSlide: function(){}, // Triggers when last slide is shown afterLoad: function(){} // Triggers when slider has loaded }); }); </script>
UPDATE: Not sure how but it is working now, below is what I have now
Code:<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <link rel="stylesheet" href="css/nivo-slider.css" type="text/css" /> <script src="js/jquery.nivo.slider.pack.js" type="text/javascript"></script> <!-- Include the theme stylesheet in the <head> section --> <link rel="stylesheet" href="css/default.css" type="text/css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script src="js/jquery.quicksand.js" type="text/javascript"></script> <script src="js/jquery.easing.js" type="text/javascript"></script> <script src="js/script.js" type="text/javascript"></script> <script src="js/jquery.prettyPhoto.js" type="text/javascript"></script> <link href="css/prettyPhoto.css" rel="stylesheet" type="text/css" /> <script type="text/javascript"> $(window).on('load', function() { $('#slider').nivoSlider({ effect: 'random', // Specify sets like: 'fold,fade,sliceDown' slices: 15, // For slice animations boxCols: 8, // For box animations boxRows: 4, // For box animations animSpeed: 500, // Slide transition speed pauseTime: 3000, // How long each slide will show startSlide: 0, // Set starting Slide (0 index) directionNav: true, // Next & Prev navigation controlNav: true, // 1,2,3... navigation controlNavThumbs: false, // Use thumbnails for Control Nav pauseOnHover: true, // Stop animation while hovering manualAdvance: false, // Force manual transitions prevText: 'Prev', // Prev directionNav text nextText: 'Next', // Next directionNav text randomStart: false, // Start on a random slide beforeChange: function(){}, // Triggers before a slide transition afterChange: function(){}, // Triggers after a slide transition slideshowEnd: function(){}, // Triggers after all slides have been shown lastSlide: function(){}, // Triggers when last slide is shown afterLoad: function(){} // Triggers when slider has loaded }); }); </script>
CSS Codes
Reply With Quote
Bookmarks