WordPress.org

Ready to get started?Download WordPress

Forums

oik-nivo-slider
[resolved] auto sized slider with flexible height (8 posts)

  1. sam.christiansen
    Member
    Posted 1 year ago #

    Hi,

    I'm using version 1.8 of the plugin. Thank you very much for creating it!

    I am using nivo slider in the header of my 2012-derived theme site. I noticed that the slider was resizing the page after the images loaded. I wanted to avoid this, so I used the CSS to hard-code the size of the slider in the header..

    Unfortunately, 2012 is flexible width, so I broke smaller screens like mobile devices!

    I came up with an approach that fixes this, using a hidden div with a margin that makes it maintain aspect ratio, even as the screen resizes. I would gladly offer my modifications back to the author or others if they would find it useful.

    You can check out the slider on my site if you'd like: http://songoftheroad.com

    thanks,
    sam

    http://wordpress.org/extend/plugins/oik-nivo-slider/

  2. bobbingwide
    Member
    Plugin Author

    Posted 1 year ago #

    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?

  3. sam.christiansen
    Member
    Posted 1 year ago #

    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

  4. bobbingwide
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  5. sam.christiansen
    Member
    Posted 1 year ago #

    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 960x250. 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

  6. bobbingwide
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  7. sam.christiansen
    Member
    Posted 9 months ago #

    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

  8. bobbingwide
    Member
    Plugin Author

    Posted 8 months ago #

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

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.