WordPress.org

Support

Support » Plugins and Hacks » Meteor Slides » responsive images

responsive images

  • 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.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author Josh Leuze

    @jleuze

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

    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

    Hi Josh,

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

    — j

    Plugin Author Josh Leuze

    @jleuze

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

    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.

    thanushka

    @thanushka

    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

    Plugin Author Josh Leuze

    @jleuze

    @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.

    thanushka

    @thanushka

    @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..

    Plugin Author Josh Leuze

    @jleuze

    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%;
    }
Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘responsive images’ is closed to new replies.
Skip to toolbar