1

I'm using Nivo Slider to show an image gallery into a responsive website. The slider extends for 100% width and height depends on the aspect ratio of images (all images have the same height).

If user connection is slow (or images are heavy), slider may take a long time before load: during this time, the preloader icon is not shown, since slider has height equal to 0. When slider has loaded, its height jumps to the correct value (depending on images height). This behaviour creates a annoying effect, expecially if we have something (titles, paragraphs..) which has loaded before the slider.

My goal is to impose the correct (final) height to Nivo Slider before images have completely loaded. This would both avoid the annoying "jump effect" and let users to see the preloader icon, preparing them to something which is loading.

Images with known aspect ratio

If I know images aspect ratio before loading, I can edit Nivo Slider CSS to impose the correct final height. My best attempt (with an aspect ratio of 2:1) is the following:

HTML

<div class="theme-default">
    <div class="nivoSlider">
        <img src="img/one.jpg" />
        <img src="img/two.jpg" />
    </div>
</div>

CSS

.theme-default {
    padding-top: 50%; /* aspect ratio 2:1 */
    height:0;
    position: relative;
}

.theme-default .nivoSlider {
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    background:#fff url(loading.gif) no-repeat 50% 50%;
}

.theme-default .nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
    height: 100% !important;
}


Images with unknown aspect ratio

But if I prior don't know what will be the aspect ratio of images (I only have guarantee that they will have the same height), what can I do? Are there any ways to have a sort of images dimensions "preview" before they are loaded, to let me compute the correct aspect ratio?

Giorgio
  • 1,940
  • 5
  • 39
  • 64
  • This is an interesting question. Can you provide an online example? – Dragos Sandu Jan 05 '14 at 12:14
  • Hi @DragosSandu, I've just created an online example. You may find it here: [nivo slider example](http://testinternet.altervista.org/nivo/). In this case images are (3008x2000)px, so aspect ratio is 66.49% in default.css file – Giorgio Jan 05 '14 at 13:32
  • 1
    Yes, this is the case when aspect ratio is known before so I can set the css file in design phase. – Giorgio Jan 05 '14 at 13:41

2 Answers2

0

I know this is not exactly what you want but you could use $(window).load for your slider. Wrap the nivo slider in $(window).load like that

 $(window).load(function(){
      //slider code here
    });

The slider will begin only after all images on the page have loaded.

More information here. I'm still looking for another solution.

Community
  • 1
  • 1
Dragos Sandu
  • 664
  • 3
  • 16
0

What i would say is wrap the slider div into a parent div.

for example:

<div id="sliderWrapper">
   <div id="nivoSliderW">
      <div>image to slide</div>
      <div>image 2 to slide</div>
   </div>
</div>

Then just give your "sliderWrapper" the height/width you want. This way, all elements around the sliderwrapper will have their positioning and it wont depend on the wonky loading effect etc.

if you decide to change your images height, then give the "sliderWrapper" div a "min-height" CSS property to your smallest image height and that will make it semi responsive on height change.

Hope this steers you right. good luck.

somdow
  • 6,268
  • 10
  • 40
  • 58
  • Hi @somdow. Correct me if I'm wrong, but if I use the `min-height` property, it supposes that I know the height (or at least the aspect ratio) of images on design phase. My problem is when I can retrieve images aspect ratio only run-time. I was wondering some way to get it before images are loaded, to set (for example with some external js code) the height of slider to the correct value before the slider has completed loading. – Giorgio Jan 05 '14 at 14:11
  • Well the reason i said "min-height" is because you said that the images height were all the same. This said, to start with, id say add a min-height anyways because this way, even if the image height is higher than the min-height, nivoSlider will auto smooth scroll to fit the height so the animation would be smooth. To directly answer your question, i dont think there is a way to pre-define or pre-read an images height if not on the app. – somdow Jan 05 '14 at 14:15
  • thinking about it, what you can possibly do is, load in the images hidden, then with js, take a sample of the images height/width and then append that number to the slider etc. This would work but would be alot of code, id just say do it with my above comment. – somdow Jan 05 '14 at 14:16