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
Code:
<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" />
in the index.php I have the following
Code:
<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>
Can someone help point me in the direction of where I am going wrong with it, thank you in advance
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>
