drewbrolik / responsive-img Goto Github PK

Would you accept a pull request for swapping out the (in my mind, performance-inhibitive) $(window).resize for window.matchMedia? Basically, I would build it like so:

if (typeof window.matchMedia === "function") {
  //use matchMedia
 for(curOptionSize in this.options.breakpoints) {
    this.mq[curOptionSize] = matchMedia("screen and (max-width:"+curOptionSize+")");
    this.mq[curOptionSize].addListener(resizeImage);//gets passed the media query object
  }
} else {
  //use $(window).resize
}

Cons:
matchMedia is not fully supported yet, so we'd have to keep the original functionality intact.

I noticed that your library only support img tags. Are you planning to add this to css background images?

SO this checks the container size? NOT the screensizes?

Can i get a confirmation that this checks for the container width size and NOT the screensizes, please

So if i specify my container
< div style="width:350px" >< img />< /div >

The image tag will load the required thumbnail?

It doesn't replace the images automatically, but it creates the smaller versions of it!
Before you ask, I've placed the jquery library and the plugin correctly, I assume, as it's easy...What's going wrong? My web site is http://delbem.net/site/
PS.: I'm testing it just for the top text, that actually is a .png.
Thanks

Trying to change a background image, but it doesn't seem to work. Other images are responsive with the script correctly in place -- it's just a background image that won't change.

Have called the correct div like so:
$("#feature").responsiveImg({srcAttribute:"data-src"});

and have added the data-src attribute to the feature div as instructed:
data-src="wp-content/themes/hestan-responsive/images/kitchen-staff.jpg"

Since all other images on the same page are responding correctly to responsiveImg.js, I'm stumped! Have triple checked div ids, image paths and attributes... any help is much appreciated.

for some reason my header image is loading the small version when it should load a larger image. do i need to set a size somewhere? it's a responsive width:100% image http://digisocialnet.com

Hi.

I would like to submit feature request to detect retina displays, to be able to serve double resolution pictures in order to increase their sharpness on iphones and other retina devices.

This would be in my opinion very helpful and could prove to be essential in optimizing network traffic performance on website without sacrificing the visuals.

Thanks, keep up with the nice code.

Hi Drew, this looks like a great bit of script. I'm a bit of a novice so your help would be greatly appreciated!

My feeling is that it's not working as the only way I can think to test it is by using a HUGE background image (images/rock.jpg) and then checking page download times in Chrome for changing browser window sizes. When re-sizing the browser window, download times are not improved so I can only guess that it's not working... any ideas what I'm doing wrong?

The "images" folder on the server has permissions of 755 by the way...

I'm trying to add this to the Swiper responsive image slider, which uses data-background rather than img src to the background file, if that makes sense.

The HTML

$.fn.responsiveImg = function(additionalOptions) {

	var options = { //- set default options
		breakpoints : {
			"_small":360,
			"_medium":780,
			"_large":900
		},
		srcAttribute : "data-background",
		pathToPHP:"js",
		createNewImages:true,
		jpegQuality:80,
		callback:false
	}

I just tried your script and got an error in the console:

GET http://www.mydomain.de/dee/responsive/img/1500x500_large.jpg 404 (Not Found) responsiveImg.js:170
XHR finished loading: "http://www.mydomain.de/dee/responsive/js/responsiveImg.js.php?makeImage=1&file…mg%2F1500x500.jpg&fileOut=img%2F1500x500_large.jpg&size=900&jpegQuality=90". jquery.js:8706

Calling the PHP-file from the message above shows an error stating the image could not be found. The path used by getimagesize looks pretty messed up too.

Warning: getimagesize(../../../../www.mydomain.deimg/1500x500.jpg) [function.getimagesize]: failed to open stream: No such file or directory in /var/www/web199/html/dee/responsive/js/responsiveImg.js.php on line 153
0 target width is 900 and original width is

Heres my img-tag:

<img src="img/1500x500.jpg" alt="">

Opening the image directly in the browser works fine.

I already tried to put an absolute URL to the image in the img-tag but this won't work either.

Haven't had a chance to try this yet, but just wondering:

If an image has already been generated by the PHP script, will it load properly from a CDN without hitting the origin server for each request?

I have some problem on my Nexus 4 device.
The device resolution is 384px x 592px and pixel-ratio is 2.

I set my image tag like this:

<img id="img1" src="images/banner.png" />

When I set responsiveImg script like this:

$('img').responsiveImg({
    breakpoints: {
        "_mobile": 480
    }
});    

And show the image on my Nexus 4 Chrome browser,
it didn't show the "_mobile" image, instead the original default image(banner.png).

Actually when i change the option like this:

$('img').responsiveImg({
    breakpoints: {
        "_mobile": 768
    }
});    

And it works properly. It load _mobile image.
It seems this plugin not reflect device pixel-ratio properly.

Am i was something wrong?

Any idea or any help please.

Hi there,

thank you very much for programming this great plugin; I'm planning to use it on my personal site. I did run into issues with the pathToPHP option: Since my CMS is using SEO urls like index.php/category/subcategory/article, I have to set up the path with a "/" at the beginning - thankfully jQuery is quite smart about this and it works.

However, due to the way the script tries to determine the baseURL by counting the slashes in the path, this obviously breaks the plugin. For me, this was easy to patch and the script is running just fine now, but maybe this is something you want to make a bit more solid if you plan another release. The easiest solution here would to not count slashes at the beginning (and I could easily put in a pull request for this), but I think the whole integration of the PHP file by using baseURL is a bit sketchy - the php for example could never be in a directory above the output etc.

Add to line 145 (right after calling setSource):

// callback
if (typeof options.callback == 'function') { // make sure the callback is a function
options.callback.call(this); // brings the scope to the callback
}

Hey, maintainer(s) of drewbrolik/Responsive-Img!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library drewbrolik/Responsive-Img is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "drewbrolik/Responsive-Img",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!