Hi, I succesfuly used your script with responsive slider. I wonder if i can use it in gallery for images. My code is How can I make link to responsive image? Thanks in advance.

Hi @kvendrik I love the way of how this plugin works, I think it would be nice and a performance boost using a debounced version of makeImageReponsive when browser resizes, like this one http://own.li/BAHt, what do you think?

Is there a way to fire the function makeImagesResponsive after responsive images are loaded onto the page via server side? I'm hoping to fire the makeImagesResponsive function onclick with a possible delay after the images are triggered to load via server side.

If you know how to test for the <noscript> path, please add a note to the Readme. Disabling JS in Chrome does prevent script execution. Meanwhile, the <noscript> tag is ignored, it seems.

What's your setup to test this?

Right now, makeImagesResponsive processes every single image in the document, which is inefficient when you have a lot of images on the page and you only want to process one or a few of them.

My proposal is to add a parameter to makeImagesResponsive that allows the program to specify which images should be processed. It should default to processing all of them as it does now.

I think it would make sense to allow a querySelector string, which would basically be an argument to document.querySelector or its equivalent, or an array of DOM elements for each image you want to transform.

makeImagesResponsive('#image');
makeImagesResponsive('.image');
makeImagesResponsive([document.getElementById('image')]);

Here is a link to the relevant polyfills required to support querySelector and querySelectorAll

https://github.com/inexorabletash/polyfill/blob/master/polyfill.js#L671

Hello,

Should your cool responsive image JavaScript support external images?

I tried using it for some Google maps static API images, like:

<img alt="Static Map of Antigua" data-src="<767:https://maps.googleapis.com/maps/api/staticmap?center=17.175854%2c-61.850532&zoom=11&size=720x720,
<979:https://maps.googleapis.com/maps/api/staticmap?center=17.175854%2c-61.850532&zoom=11&size=290x290,
<1200:https://maps.googleapis.com/maps/api/staticmap?center=17.175854%2c-61.850532&zoom=11&size=380x380,
>1200:https://maps.googleapis.com/maps/api/staticmap?center=17.175854%2c-61.850532&zoom=11&size=470x470" />

However; the src attribute gets set to just "https", would be awesome if it did support external images... or if I'm just using it wrong you could let me know how to use it correctly :)

Kind regards,

Firstly, awesome plugin, will be adding it to my framework.

I was wondering if it would be possible to use the width of the images parent container rather than the width of the viewport?

I ask this because, like a lot of people, I use a grid system, and more often than not the image on a mobile (one column parent) is wider than that being served to desktops (ie 1 out of 4 columns, approx 23% of the viewport, about 260px @1140px wide)

Would be great as an option, or a forked repo

TY Paul

I believe I've found a (potential) bug when referencing a full URL such as http://example.com/images/large.jpg. Seemingly whenever a full URL including a colon is used in the 'data-src', it stops the dynamic generation of the 'src' attribute before the colon.

Eg: If I have data-src="<320:http://example.com/images/small.jpg" it will generate src="http" rather than src="http://example.com/images/small.jpg"

I believe this to just be an issue with the way it parses colons, but it's late and I won't have time to look at this until tomorrow.

Not sure if this is the right place for this question, but am curious. Overall the plugin looks great and background image support would be wonderful :)

When testing the demo here in a web browser, At smaller resolution, IE and FireFox have a horizontal scrollbar due to the image not fitting the viewport. Chrome looks great!

Hi there,

I would love to use this for a commercial product. Would you be able to add a license file to this repo? And would it be ok to use this for commercial use?

Thanks in advance and great stuff mate! Sam

Love this JS, been looking for something that works across all browsers. However, I have a question. Does this work on device height as well? For example, using <980 and min-height.

Thanks.

Now you can provide targets to makeImagesResponsive. Will accept:

• A valid document.querySelector string
• A valid HTMLImageElement
• An array of HTMLImageElements
• No argument passed defaults to all images in the DOM

Must still define a data-src or data-src2x attribute or else targets will be passed.

Did a couple things. Wrap the entire program in a closure to allow us to safely create local variables. Also introduced a local throttle function, which will execute the given function at most every wait ms (see http://underscorejs.org/docs/underscore.html#section-71).

When attached to the window's resize event, we instruct makeImagesResponsive to execute at most every 500ms, or twice per second.