Databases
StackOverflow2013
Postsdbo
POMake Nivo Slider fade-in on load
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMake Nivo Slider fade-in on load
    text
    copied!<p>Hey, I want to load the Nivo Slider in this order:</p> <ol> <li>Before the slides appear, a loading.gif is shown.</li> <li>Once the slides are ready to appear, they fadeIn.</li> </ol> <p>The Nivo Slider's call function looks like this:</p> <pre><code>$(window).load(function() { /* ///// start WINDOW load ///// */ $('#slider').nivoSlider({ effect:'random', //Specify sets like: 'fold,fade,sliceDown' slices:12, animSpeed:500, //Slide transition speed pauseTime:3000, startSlide:0, //Set starting Slide (0 index) directionNav:false, //Next &amp; Prev directionNavHide:true, //Only show on hover controlNav:false, //1,2,3... controlNavThumbs:false, //Use thumbnails for Control Nav controlNavThumbsFromRel:false, //Use image rel for thumbs controlNavThumbsSearch: '.jpg', //Replace this with... controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src keyboardNav:true, //Use left &amp; right arrows pauseOnHover:true, //Stop animation while hovering manualAdvance:false, //Force manual transitions captionOpacity:0.8, //Universal caption opacity beforeChange: function(){}, afterChange: function(){}, slideshowEnd: function(){}, //Triggers after all slides have been shown lastSlide: function(){}, //Triggers when last slide is shown afterLoad: function(){} //Triggers when slider has loaded }); </code></pre> <p>});</p> <p>The loading.gif is shown with this CSS statement that is located within the nivo-slider.css file:</p> <pre><code>#slider { background: #eee url(../images/nivo-loader.gif) no-repeat 50% 50%; position: relative; width: 960px; height: 328px; } #slider img { position: absolute; top: 0px; left: 0px; display: none; } </code></pre> <p>I thought the way to do this was to use the built-in afterLoad parameter, like this: <code>afterLoad(function() { $(this).fadeIn(); });</code> but that didn't work out.</p> <p>So I'd really appreciate any ideas! Thank you!</p> <p><strong>UPDATE:</strong></p> <p>The HTML is very simple (as most Nivo slider's layouts):</p> <pre><code>&lt;div id="slider" class="box"&gt; &lt;!-- Image/video top box (cinema) --&gt; &lt;img src="assets/images/cinema/slide1.jpg" /&gt; &lt;img src="assets/images/cinema/slide2.jpg" /&gt; &lt;img src="assets/images/cinema/slide3.jpg" /&gt; &lt;img src="assets/images/cinema/slide4.jpg" /&gt; &lt;/div&gt; </code></pre> <p>When I use the afterLoad parameter nothing happens; the loading.gif appears but then the images show up harshly (without the fadeIn() I'd like). So basically, everything works, but I'd just like these images to fade in once the show is ready to start. Then, they should simply slide with their random transitions (as they do now).</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