StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>What I'd do is overlay the slider with the loader and use nivo's <code>afterLoad</code> function to do the animation you want on the contained images, not the <code>slider</code> holder. Here's how I'd do it:</p> <pre><code><div id="wrapper"> <div id="slider" class="box"> <img src="assets/images/cinema/slide1.jpg" /> <img src="assets/images/cinema/slide2.jpg" /> <img src="assets/images/cinema/slide3.jpg" /> <img src="assets/images/cinema/slide4.jpg" /> </div> <div id="preloader"> <img src="assets/images/nivo-loader.gif" /> </div> </div> </code></pre> <p>Now with the CSS you'll overlay the preloader over the slider using absolute position in relation to the relative position of the <code>wrapper</code>:</p> <pre><code>#wrapper { position:relative; } #preloader { background:#eee; position:absolute; top:0; left:0; z-index:51; /* z-index greater than #slider */ width:960px; height:328px; } #preloader img { padding:150px 0 0 470px; /* unknown img size, but adjust so centered */ } #slider { background: #eee url(../images/nivo-loader.gif) no-repeat 50% 50%; position: relative; z-index:50; /* set z-index as appropriate to your site */ width: 960px; height: 328px; } #slider img { position: absolute; top: 0px; left: 0px; display: none; } </code></pre> <p>Then, the nivo slider will have all appropriate calls, then the <code>afterLoad</code> will contain your fade animation on the images within the slider:</p> <pre><code>$('#slider').nivoSlider({ ...lots of properties then... afterLoad: function(){ var $slider = $('#slider img'); $slider.css('opacity',0); $('#preloader').fadeOut(500, function(){ $slider.animate({'opacity':1}, 500); }); } }); </code></pre> <p>If you want a cross-fade instead, then your <code>afterLoad</code> can look simply like:</p> <pre><code>$('#slider').nivoSlider({ ...lots of properties then... afterLoad: function(){ $('#preloader').fadeOut(500); } }); </code></pre> <p>This will avoid any problems you had with images popping in.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload