CODEWITHSUNDEEP
jquerynivo-slider
user1037444
user1037444

Reputation: 313

Nivo slider, before it's triggered all the images are visible on the page

I'm using the nivo slider on a site and before it's loaded all the images are static on the page for about a second. Once the nivo sliders has loaded they all sit in the slider.

Is there a way to get around this? To make the slider trigger first before any of the page is loaded? The site it www.pegasusproperty.co.uk the code I'm using for the slider is 

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect: 'fade',
        animSpeed: 700,
        pauseTime: 4000,
    });
});
</script>    this code is in the head of the document

It happens best in Firefox

regards

Upvotes: 5

Views: 9195

Answers (4)

Nicole Mino
Nicole Mino

Reputation: 1

My solution was just to add this class:

.nivoSlider {
    overflow: hidden;
    max-height: 460px;
}

You can setup the height you need.

Upvotes: 0

Paul Trotter
Paul Trotter

Reputation: 607

Like sparky I approached this with visibility so that other content didn't shift.

If like me you are using Views Nivo Slider for drupal then you will set your animation speed etc from within views so all you need to set in your jQuery script is the visibility. Note I prefer a slightly different way of expressing the jQuery css

$(window).load(function() { 
    $('#slider').css({visibility: 'visible'});
});

In your page the following code is fine, but I prefer to set styles in css.

<div id="slider" style="display: none;">

Upvotes: 0

Jeff Wilbert
Jeff Wilbert

Reputation: 4520

Try this

Set you div slider to display: none;

<div id="slider" style="display: none;">

And on page load/document ready show it

$(window).load(function() { 
    $('#slider').show().nivoSlider({ effect: 'fade', animSpeed: 700, pauseTime: 4000 }); 
});

Edit: I think your solution could actually be a lot simpler. You have your slider div set to a fixed width and height but your images expand it bigger, simply set the overflow of the div to hidden should solve the problem

#slider {
 overflow: hidden;   
}

Upvotes: 6

Sparky
Sparky

Reputation: 98728

I prefer to use visibility:hidden; rather than display:none; since it does not remove the element from the content flow. I think it's visually better not to have content shifting around after the page loads.

<div id="slider" style="visibility:hidden;">

Make it visible after the images fully load without any additional content shifting.

$(window).load(function() { 
    $('#slider').css({'visibility':'visible'}).nivoSlider({
      effect: 'fade',
      animSpeed: 700,
      pauseTime: 4000,
    });
});

Upvotes: 0

Related Questions