auto sized slider with flexible height

Hi Sam, thanks for investigating this. Did you need to create the new div ( class=”nivoSlider-dummy” ) or could you just have styled the class=”ribbon” div?

Hi,

I was worried about mucking with the “ribbon” div, because I wasn’t sure what it was for! It could be I could have re-used it. I can give it a try if you’d like.

Here is the snippet of code I changed, in oik-nivo-slider/nivo.inc:

sdiv( $class );
    sdiv( "slider-wrapper theme-${theme}" );
    if ( $ribbon )
      sediv( "ribbon" );
    sediv( "nivoSlider-dummy" );
    sdiv( "nivoSlider", "slider-$slider_id" );
    $funcname = bw_funcname( "bw_format_nivo", $atts['post_type'] );
    foreach ( $posts as $post ) {
      $funcname( $post, $atts );
    }
    ediv();
    ediv();
    ediv( $class );

Pretty simple, just adding “nivoSlider-dummy”. The CSS is pretty simple for it.

I’m sorry if there is an obvious mistake; I’m just learning PHP.

thanks,
sam

Hi, I was able to create a similar effect just using the ribbon class. But the CSS was theme specific. Could you add your CSS changes here. AND do you have a suggestion for how to programmatically determine the %age figure for the margin?

BTW. The ribbon class was used in the pascal and orman themes – jQuery nivo 2.7.1. It’s possible to turn it off by passing ribbon=n parameter.

Hi,

Here is the CSS that I added:

.slider-wrapper {
    display: inline-block;
    position: relative;
    width: 100%;
}

.nivoSlider-dummy {
    margin-top: 26%; /* 960x250 */
}

div .theme-default .nivoSlider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* show me! */
    /*
    background-color: silver;
    */
}

Unfortunately, I don’t know if there is a good answer about how to programmatically determining the percentage figure. I knew that our header the image was going to be 960×250. 250 / 960 => 26%. I suppose if you knew the width/height of the slider (maybe you could look at the first source image width/height?), then you could calculate this.

I have also seen people do the auto-resizing with JavaScript, but the CSS solution seems a bit more elegant. I can look into the JavaScript version of resizing if you think it would be a better option.

thanks,
sam

Hi Sam, thanks for that. The nivo slider jQuery code doesn’t run until the images are loaded so any logic to determine the correct margin would have to be done in the server when the images are being added to the generated HTML.

When I said that I was able to create a similar effect, I didn’t quite get it working properly. I have now achieved the same effect without the dummy div. Just apply the margin-top to .ribbon

But I haven’t yet achieved the CSS to ensure that the control nav links are displayed correctly.

Just wanted to follow up – after updating to version 1.9 of the plugin recently, I just switched to apply the style to the ribbon and it seems to be working great.

thanks,
sam

oh good. So I’ll close the topic as resolved.