I’ll have to test that, I’m not sure if you can do it or not.
Thread Starter
j11k00
(@j11k00)
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
Thread Starter
j11k00
(@j11k00)
Hi Josh,
I know you probably have a ton of requests, but did you by any chance have time to test this?
— j
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.
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
@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.
@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..
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%;
}
