Results 1 to 1 of 1

Thread: nivoslider and pretty photo conflict

  1. #1
    Join Date
    May 2012
    Posts
    216
    Thanks
    0
    Thanked 1 Time in 1 Post

    Default 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>
    Last edited by ianhaney; 05-27-2017 at 10:31 AM.

Similar Threads

  1. Resolved nivoslider https help
    By ianhaney in forum JavaScript
    Replies: 3
    Last Post: 09-07-2016, 02:39 PM
  2. Replies: 5
    Last Post: 12-03-2015, 02:08 PM
  3. pretty photo too big
    By DS928 in forum CSS
    Replies: 9
    Last Post: 09-24-2013, 07:44 PM
  4. Fluidtextresizer disables Nivoslider
    By janvl in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 12-16-2012, 05:44 AM
  5. Dynamic Ajax Content and Pretty Photo
    By mylo in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 09-17-2011, 02:26 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •