drewbrolik / responsive-img Goto Github PK
View Code? Open in Web Editor NEWResponsive Img is a jQuery plugin that changes an image's src attribute based on its container's width.
Responsive Img is a jQuery plugin that changes an image's src attribute based on its container's width.
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!
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
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?
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.
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.
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.
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
The javascript
<script> $(".swiper-slide").responsiveImg({srcAttribute:"data-background"}); </script>... and I've modified the srcAttribute and jpegQuality lines in responsiveImg.js file to:
(function($) {
$.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
}
Help! Really appreciate any advice! Thanks,
Greg
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.
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
}
I noticed that your library only support img tags. Are you planning to add this to css background images?
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 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.
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?
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.