WordPress.org

Ready to get started?Download WordPress

Forums

Meteor Slides
responsive images (10 posts)

  1. j11k00
    Member
    Posted 3 years ago #

    Hi, thanks for the awesome plugin.

    I'm trying to figure out how to make the slideshow and the images scale to the content area automatically. I've managed to solve the horizontal scaling with css and the jQuery cycle options fit: 'true' and horizontal: 'null'. But I have been banging my head with the vertical scaling. There is a jQuery cycle option for height: 'auto' also, but it collapses the the slideshow container. No luck with css either... This is what I have

    For the css:
    .mslide, .mslide img {max-width: 100%;height: auto;}

    The shortcode:
    and [meteor_slideshow metadata="fit: 'true', width: 'null'"]

    Could someone please point me in the right direction.

  2. Josh Leuze
    Member
    Plugin Author

    Posted 3 years ago #

    I'll have to test that, I'm not sure if you can do it or not.

  3. j11k00
    Member
    Posted 3 years ago #

    That would be great!

    I have done this successfully with Jquery cycle, but not your plugin. Let me know if I can help. Oh and sorry about the double post.

    ā€” j

  4. j11k00
    Member
    Posted 3 years ago #

    Hi Josh,

    I know you probably have a ton of requests, but did you by any chance have time to test this?

    ā€” j

  5. Josh Leuze
    Member
    Plugin Author

    Posted 3 years ago #

    Hi, I'm afraid I haven't had a chance to yet, but I should be able to this week.

  6. mnkysrbtr
    Member
    Posted 2 years ago #

    I've been beating up your plugin all day trying to figure this one out, I would love it if you made it an option.

  7. thanushka
    Member
    Posted 2 years ago #

    I have made all the images in my wordpress site to be responsive (I used small function instead of a plugin) and I wrote an article on how to do the same. Iā€™ll leave the link here to anyone interested.

    Making images in wordpress responsive

  8. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    @thanushka Thanks for the info!

    To follow up on this thread, it is possible to build a responsive slideshow with Meteor Slides. The trick is that you need to add a dummy image to the slideshow that can scale. Check out this forum post for more details. Once I figure out the details I'll try to update Meteor Slides, or post a tutorial on how to do this.

  9. thanushka
    Member
    Posted 2 years ago #

    @JLeuze, You are welcome!

    To add to the bove (to anyone who want to do it without using plugins), The reason for weird vertical scaling (when we make them scalable in CSS), is because of the width and height in <img> tags. WordPress automatically adds a width and height to all it's <img> tags.

    Even though we make the images scalable in CSS, with img{max-width: 100%;} We have to completely remove both width and height values from all images <img> for them to scale proportionately.
    If it's an image in a post or a static page/ template page, all you have to do is, add the above CSS to the style.css file, and then remove the 'width' and 'height' properties from the <img> tag.
    If it's a dynamic image such as a slideshow or post thumbnail we can use a function to remove the width and height. The above link I posted contain the function and steps on how to do it.

    This is the page/demo which I have put the above function to work..

  10. Josh Leuze
    Member
    Plugin Author

    Posted 2 years ago #

    Removing the height and width to scale the images within the slideshows works well, but the slideshow container itself doesn't always scale as smoothly because the all the slides are positioned absolutely and it is left without any inline content that scales. That is why that forum post suggests adding a dummy image that does scale, and enables the slideshow container to scale along with the slides.

    I hadn't thought to remove the height and width from the image tags, that's a good idea, what I did was set the height to auto so it scales with the width:

    img {
        height: auto;
        max-width: 100%;
    }

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic