image with nivo slider jquery

Go To StackoverFlow.com

0

I use the nivo slider jquery template to make a diaporama with picture. My problem is that it displays the first image correctly, then the second is displaying on the first one, but vertically, just with a widht of 40px maybe. So I have the 2 image on the same time, the first in right size, the second no. Do you know what I have to do?

This is my a part of my code:

<style> 
.nivoSlider {
    position:relative;
    width:618px; /* Change this to your images width */
    height:246px; /* Change this to your images height */
    background:url(images/loading.gif) no-repeat 50% 50%;
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}
.nivoSlider a {
    border:0;
    display:block;
}
</style>
<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider();
});
</script>    
<div id="slider" class="nivoSlider">

    <img src="/template/images/custom/popup_imgtest.jpg" alt="" />
    <img src="/template/images/custom/popup_imgtest2.jpg" alt="" />
   </div>
2012-04-04 00:39
by webcalif


1

I think your problem is that you are missing the styles for the slices that the nivoSlider creates for it's elaborate effects.

They are right in the zip file you get when you download the nivoSlider.

/* The slices and boxes in the Slider */
.nivo-slice {
   display:block;
   position:absolute;
   z-index:5;
   height:100%;
}

.nivo-box {
   display:block;
   position:absolute;
   z-index:5;
}

That was all I added to your style block and the code worked for me. Hope this helps.

2012-04-04 01:33
by James Ballantine