Home/ Questions/Q 8308687
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T18:52:54+00:00

I am having an issue with the nivo slider JQuery script. I have the

  • 0

I am having an issue with the nivo slider JQuery script. I have the slideshow working on a page with no layout here: http://www.studentbridges.org/nivo-slider/slideshow.php .

But once I add it to my layout, it simply does not display. http://www.studentbridges.org/new/

On that page, the slideshow is supposed to appear over the picture in the header. It just doesn’t work. Here is the code for how I set up the slideshow:

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

<div style="position: relative; left: 29px; top: 77px;">
<div style="position:absolute; width: 356px; height: 263px;" >

        <div id="slider" class="nivoSlider">
            <img src="/nivo-slider/001.png" alt="" />
            <img src="/nivo-slider/002.png" alt="" />
            <img src="/nivo-slider/003.png" alt="" />
        </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" src="/nivo-slider/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/nivo-slider/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
    effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
    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
    directionNavHide: true, // Only show on hover
    controlNav: false, // 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
});
});
</script>

</div>
</div>

I believe I have all the stylesheets linked in my header. All the images are the same size as the container DIV as well, so I’m not sure what the issue is.

Anyone have any input as to what the issue could be?

~Noelle

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem appears to be in your php header file.

    Everything in your header file has been condensed to one line. This is causing an error in your javascript because there are comments in your slider configuration. These comments are blocking out the rest of your options.

    Fix the formatting of your header file and all should be well.

    • 0