Search code examples
jquerynivo-slider

Nivo Slider doesn't work at all


I've tried to put a nivo-slider on my website's home page. For some reason, it doesn't show at all. I can't manage to figure out why it doesn't...

UPDATE: it now shows only a static image :S (I placed the jquery library before the actual script

I put this in my header: (header is located in the layout.php file in directory /site)

<!--NIVO SLIDER-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="site/nivo-slider/jquery.nivo.slider.js" type="text/javascript"></script>
<link rel="stylesheet" href="site/nivo-slider/nivo-slider.css" type="text/css" media="screen" />

<link rel="stylesheet" href="site/nivo-slider/themes/default/default.css" type="text/css" media="screen" />

This is what I put in index.php (file located in the main directory):

<? require('site/layout.php');

function banner($DB) {
?>
    <div class='slider-wrapper'>
        <div id='slider' class='nivoSlider theme-default'>
            <img src='site/nivo-slider/slide1.jpg' alt='' />
            <a href='http://dev7studios.com'><img src='site/nivo-slider/slide2.jpg' alt='' title='#htmlcaption' /></a>
            <img src='site/nivo-slider/slide3.jpg' alt='' title='This is an example of a caption' />
            <img src='site/nivo-slider/slide4.jpg' alt='' />
        </div>
    </div>
    <div id='htmlcaption' class='nivo-html-caption'>
        <strong>This</strong> is an example of a <em>HTML</em> caption with <a href='#'>a link</a>.
    </div>

    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
<? 
}

After this block of code, two other functions are called: function body_text_left($DB) & function body_text_right($DB) (the left and right side of the page, BELOW the nivo-slider)

All the nivo-slider files are located in this direcory: /site/nivo-slider

It's weird, because when I look at the source code, everything is there. All links will load when I click on them.

Any ideas? Thanks in advance!


Solution

  • First, repair this:

    <? require('site/layout.php');
    
    function banner($DB) {
    ?>
    

    into:

    <?php require('site/layout.php');
    
    echo 'function banner($DB) {';
    ?>
    

    You have prototype.js in your script. Put script load of prototype after nivo slider or turn off to check problem.

    On last line in index.php try instead:

    <? 
    }
    

    as:

    <?php 
    echo '}';
    ?>
    

    Try put jquery.js at bottom of code.