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

4

1 回答 1

0

问题似乎出在您的 php 头文件中。

头文件中的所有内容都已压缩为一行。这会导致您的 javascript 出现错误，因为您的滑块配置中有注释。这些评论阻碍了您的其他选择。

修复头文件的格式，一切都应该很好。

于 2012-07-27T20:34:05.743 回答